html - Bootstrap - 无法让按钮居中

Question

我想要做的就是将一个按钮置于图像顶部的中央。我已经这样做了很多次，但这里确实有些不对劲，我无法弄清楚它是什么。当按钮不是绝对时，按钮以图像为中心。我把它设为绝对，所以它位于图像的顶部，但突然偏离了中心。

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

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

Answer 1

解决方案:包装元素。
请注意，您的图像 (363x363) 小于您的列。

Bootply

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: - <50% 的元素宽度>;´

Bootply

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