为什么我的按钮不像其他元素一样居中？答案

【问题标题】：Why isn't my button centering like other elements?为什么我的按钮不像其他元素一样居中？
【发布时间】：2017-10-03 05:52:06
【问题描述】：

我正在使用 Bootstrap 3.x，并且我有一个相对位置的 div，并且按钮（一个标签）设置为绝对位置，因为我希望按钮位于底部：10px;。

我还希望按钮居中。为什么这里是半居中的？（我使用了 text-center 类）。

参见 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;
}

【问题讨论】：

首先，你的html不一致。关闭您的 p 标签，并尽量不要在 p 标签中添加 div。而且您已将按钮设置为绝对位置。
感谢您发现错字，但这并不能解决问题，在这种情况下也不会对输出产生任何影响。
试试这个：stackoverflow.com/a/46534250/5236174

标签： twitter-bootstrap css twitter-bootstrap-3

【解决方案1】：

要处理这类问题，请为相关元素添加边框，这将为您提供其位置信息，您将了解哪里出了问题。

不要让“按钮/链接”绝对和底部，而是让包装器（使用.place-bottom 类检查 div）绝对，并且宽度：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>

【讨论】：