Question

我想在垂直对齐的中心放置三个按钮，但是在Bootstrap 4中的图像上。我无法这样做我还尝试在图像上应用position:relative并{{1}在按钮上，但它也无法正常工作。

position:absolute

这是我的css代码。

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

我被困在这一点上。

Answer 1

如果您将按钮置于相对位置并且图像处于绝对位置，则可以使用边距移动图像上的按钮。

Answer 2

我为你做了https://jsfiddle.net/qynck1gp/1/

CSS

.btn-wrapper{ text-align:center; position:absolute; bottom: 0px; margin: 0 auto; width:100%;}

HTML

<div class="container-fluid headerimage" style="padding:0 !important">
 <div class="col-md-12" style="padding:0 !important">
  <img src="https://www.digitalplatforms.co.za/wp-content/uploads/2015/11/Website-Design-Background.jpg" alt="placeholder 960" class="img-responsive" >
</div>
<div class="container">
 <div class="btn-wrapper">
  <button class="btn btn-primary">Teacher</button>
  <button class="btn btn-success">Student</button>
  <button class="btn btn-warning">Administrator</button>
  </div>

如何将按钮放在bootstrap 4中的图像中心

2 个答案: