html - 两个图像之间的中心按钮，垂直百分比

Question

我正在尝试实现这种行为：

• 图像是img-fluid，因为它们需要跨引导断点进行缩放
• 布局必须始终像样机，无论图像是小还是大（按钮不需要缩放）

由于元素不能跨越divs，我尝试将按钮放在第一列并将其设置为position: absolute+ 许多道具变体，但我无法获得所需的结果。

我不需要col不惜一切代价使用 2 s，只要它都在 a 内row，我可以做任何事情，这只是我的尝试

---

一些尝试：

没有的起点button：

<div class="row py-3">
    <div class="col">
        <img src="https://fakeimg.pl/693x678" class="img-fluid">
    </div>
    <div class="col">
        <img src="https://fakeimg.pl/693x678" class="img-fluid">
    </div>
</div>

尝试1：

<div class="row py-3">
    <div style="position: absolute" class="text-center h-auto" style="position: absolute; left: 0; right: 0;">
        <a class="btn btn-success text-white px-5">Hi guys</a>
    </div>
    <div class="col">
        <div class="w-100">
            <img src="https://fakeimg.pl/693x678" class="img-fluid mr-3">
            <img src="https://fakeimg.pl/693x678" class="img-fluid ml-3">
        </div>
    </div>
</div>

尝试2：

<div class="row py-3">
    <div class="col">
        <a class="btn btn-success text-white px-5" style="position: absolute; left: 0; right: 0;">Hi guys</a>
        <img src="https://fakeimg.pl/693x678" class="img-fluid">
    </div>
    <div class="col">
        <img src="https://fakeimg.pl/693x678" class="img-fluid">
    </div>
</div>

还有许多其他...

标签： htmlcsstwitter-bootstrapbootstrap-4

Answer 1

HTML：

<div class="row some-row">
  <div class="col">...</div>
  <div class="col">...</div>
  <a class="btn some-btn"></a>
</div>

CSS：

.some-row {
  position: relative;
}

.some-btn {
  position: absolute;
  bottom: 30px;
  margin: 0 auto;
}