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

为了解决这类问题，请为相关元素添加边框，这将为您提供其位置信息，您将了解错误。

而不是拥有＆＃34;按钮/链接＆＃34;绝对和底部，使包装器（使用类.place-bottom检查div）绝对，并使用宽度：100％并使用.text-center在包装器div中包含按钮/链接中心。

＆＃13;

.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%
}

＆＃13;

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

＆＃13;

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

1 个答案: