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

Question

我正在努力实现这种行为:

• 图像是 img-fluid，因为它们需要跨越 Bootstrap 断点进行缩放
• 无论图像大小(按钮不需要缩放)，布局都必须始终像模型一样

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

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

---

一些尝试:

没有按钮的起点:

<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>

还有很多其他的......

Answer 1

像这样

.row {
  position: relative;
}

a {
  position: absolute;
  bottom: 10%;
  left: 50%;
  transform: translateX(-50%);
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>

<div class="row">
  <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>
  <a class="btn btn-success text-white px-5">Hi guys</a>
</div>