如何在图像的中心放置一个按钮

Question

我想请你帮忙在图片中央安排一个按钮。我有以下代码：

<div class="static1_home1">
<div class="box1">
  <div class="img"><img src="/img/cms/Untitled design (20).png" alt="banner" class="img-responsive" /></div>
  <div class="text">
    <h2>Ceiling Lamp</h2>
    <p>Pendant Lights Brisbane</p>
    <a class="shop" href="#">Shop Now</a></div>
   </div>
<div class="bottom">
  <div class="row">
    <div class="bos1 col col-lg-7 col-md-7 col-xs-12">
      <div class="box-inner">
        <a href="#">
          <img src="/img/cms/Untitled design (21).png" alt="banner" class="img-responsive" />
        </a>
      </div>
    </div>
    <div class="bos2 col col-lg-5 col-md-5 col-xs-12">
      <div class="box-inner">
        <a href="#">
          <img src="/img/cms/_img_cms_Untitled design (21)-png.png" alt="banner" class="img-responsive" />      </a>
      </div>
    </div>
   </div>
  </div>
</div>

第一张图片的中央已经有那个按钮了。我该如何处理下一张图片？

Answer 1

您可以使用 flexbox 在图像的中心放置一个按钮 link on codepen

在html

<div class="static1_home1">

  <div class="bottom">
    <div class="row">
      <div class="bos1 col col-lg-7 col-md-7 col-xs-12">
        <a href="#" class="box-inner">
          <img src="https://via.placeholder.com/250" alt="banner" class="img-responsive" />
          <button>my button</button>
        </a>
      </div>

    </div>
  </div>
</div>

在css

.box-inner {
  display: flex;
  align-items: center;
  justify-content: center
}
.box-inner button {
  position: absolute;
}

如何在图像的中心放置一个按钮

How to place a button on center of a image

css

center