Question

我要做的就是将图像顶部的按钮居中。我已经多次这样做了，但有些事情真的不在这里，我无法弄清楚它是什么。当图像不是绝对时，按钮与图像居中。我把它做成绝对的，所以它在图像的顶部，然后它突然偏离中心。

我在这里有一个Bootply示例：http://www.bootply.com/eHq2b3ydhH

我觉得我只是没有看到明显的东西但却真的不知道它是什么。

Answer 1

解决方案：包装元素。
请注意，您的图片（363x363）小于您的列。

HTML

<div class="button-wrapper">
    <a class="btn btn-orange" href="#" role="button">Search</a>
</div>

CSS

#grid .btn-orange{
  font-size:18px;
  padding:10px;
  background:#fcaf17;
  color:#fff;
  border:2px solid white;
  border-radius:10px;
  text-transform:uppercase;
  margin: 0 auto;
}

.button-wrapper{
  position: absolute;
  width: 100%;
  bottom: 45px;
}

第二解决方案：'左：50％; margin-left： - ＆lt;元素宽度的50％＆gt ;;'

<强> Bootply

#grid .btn-orange {
    left: 50%;
    margin-left: -50px;
    display: block;
}

Answer 2

由于这些被放置在网格元素内部和响应图像上，因此您必须补偿视口更改。您可以使用转换属性并在视口更改时将图像居中。

＆＃13;

#grid img {
  position: relative;
  margin: 0 auto;
}
.btn.btn-orange {
  position: absolute;
  width: 130px;
  height: 40px;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  z-index: 1;
  padding: 7px 0;
  font-size: 18px;
  background: #fcaf17;
  color: #fff;
  border: 2px solid white;
  border-radius: 10px;
  text-transform: uppercase;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div id="grid" class="container">
  <div class="row text-center">
    <div class="col-sm-4">	<a class="btn btn-orange" href="#" role="button">Search</a> 
      <img class="img-responsive" src="https://placeholdit.imgix.net/~text?txtsize=34&amp;txt=363%C3%97363&amp;w=363&amp;h=363">
    </div>
    <div class="col-sm-4">	<a class="btn btn-orange" href="#" role="button">Search</a> 
      <img class="img-responsive" src="https://placeholdit.imgix.net/~text?txtsize=34&amp;txt=363%C3%97363&amp;w=363&amp;h=363">
    </div>
    <div class="col-sm-4">	<a class="btn btn-orange" href="#" role="button">Search</a> 
      <img class="img-responsive" src="https://placeholdit.imgix.net/~text?txtsize=34&amp;txt=363%C3%97363&amp;w=363&amp;h=363">
    </div>
  </div>
</div>

＆＃13;

Bootstrap - 无法获得按钮到中心

2 个答案:

HTML

CSS