使用 bootstrap 5，如何以响应方式将我的 btn 按钮垂直和水平放置在我的两个图像的中间？

Question

如何将我的 btn 按钮垂直和水平放置在我的两张图片的中间？我正在努力实现这一目标：

这是我的按钮 <a class="btn btn-primary" href="#" role="button">Link example</a>，我使用的是最新版本的 bootstrap 5.

我的代码

<!-- Bootstrap-5 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">


<!-- Body -->
<div class="container">
  <div class="row">
    <div class="col-lg-6">
      <a class="btn btn-primary" href="#" role="button">Link example</a>
      <img src="https://via.placeholder.com/1920x1080.jpg" class="rounded img-fluid">
      <a class="btn btn-primary" href="#" role="button">Link example</a>
      <img src="https://via.placeholder.com/1920x1080.jpg" class="rounded img-fluid">
    </div>
    <div class="col-lg-6">
      //other code
    </div>
  </div>
</div>

Answer 1

检查 Center elements，此外，您需要将每个图像和按钮对移动到其单独的容器中：

<!-- Bootstrap-5 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">


<!-- Body -->
<div class="container">
  <div class="row">
    <div class="col-lg-6 position-relative mb-5">
      <a class="btn btn-primary position-absolute position-absolute top-50 start-50 translate-middle" href="#" role="button">Link example</a>
      <img src="https://via.placeholder.com/1920x1080.jpg" class="rounded img-fluid">
    </div>
    <div class="col-lg-6 position-relative">
      <a class="btn btn-primary position-absolute position-absolute top-50 start-50 translate-middle" href="#" role="button">Link example</a>
      <img src="https://via.placeholder.com/1920x1080.jpg" class="rounded img-fluid">
    </div>
    <div class="col-lg-6">
      //other code
    </div>
  </div>
</div>

使用 bootstrap 5，如何以响应方式将我的 btn 按钮垂直和水平放置在我的两个图像的中间？

Using bootstrap 5, how can I place my btn button vertically and horizontally in the middle over my two images in a responsive way?

html

css

responsive

bootstrap-5