html - 如何在 bootstrap 4 中将按钮置于图像的中心

Question

我想在垂直对齐的中心放置三个按钮，但在 Bootstrap 4 中的图像上。我无法这样做我也尝试在图像上应用 position:relative和按钮上的 position:absolute 但它也不起作用。

<div class="container-fluid headerimage" style="padding:0 !important">
    <div class="col-md-12" style="padding:0 !important">
      <img src="images/banner.jpg" alt="placeholder 960" class="img-responsive" >
    </div>
    <div class="container">
   <button class="btn btn-primary">Teacher</button>
   <button class="btn btn-success">Student</button>
   <button class="btn btn-warning">Administrator</button>
    </div>
</div>

这是我的 CSS 代码。

.img-responsive{
  width:100% !important;
  border-radius:0 0 5px 5px !important;
}

我卡在这一点上了。

Answer 1

如果您将按钮放在相对位置，将图像放在绝对位置，您可以在图像上移动带有边距的按钮。