如何将按钮放在图像的中心答案

【问题标题】：How to place a button on center of a image如何将按钮放在图像的中心
【发布时间】：2021-07-04 05:39:33
【问题描述】：

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

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

第一张图片的中心已经有那个按钮。如何继续拍摄下一张图片？

【问题讨论】：

标签： css center

【解决方案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;
}

【讨论】：