twitter-bootstrap - 为什么我的按钮不像其他元素那样居中？

Question

我使用的是 Bootstrap 3.x，我有一个相对位置的 div，按钮(标签)设置为绝对位置，因为我希望按钮位于底部:10px;。

我也希望按钮居中。为什么这里是半居中的？ (我使用了文本中心类)。

参见 jsfiddle: https://jsfiddle.net/0dhcoucd/4/

CSS:

.box-badge-orange {
  background-color: orange;
  position:relative;
  height:30em;
}

.box-badge-orange a {
  position: absolute;
  bottom: 10px;
}

.divaround {
  text-align:center;
}

Answer 1

要处理这类问题，请为涉及的元素添加边框，这将为您提供它们位置的信息，您就会知道哪里出了问题。

代替“按钮/链接”绝对和底部，使包装器(检查 div 类 .place-bottom)绝对，宽度:100% 并使用 .text -center 在包装器 div 中设置按钮/链接中心。

.box-badge-orange {
  background-color: orange;
  position:relative;
  height:30em;
}

.box-badge-orange .place-bottom {
  position: absolute;
  bottom: 10px;
  border:1px solid black;
  width:100%
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">



<div class="box-badge-orange">
      <h2>Title Here</h2>
      <p class="text-center">Lorem ipsum</p>
      <div class="place-bottom text-center">
          <a class="btn btn-primary btn-lg" 
             href="/providers/physician-network/about/Pages/Leadership.aspx">
               Click here
          </a>
    </div>
</div>