在警报字段中垂直对齐按钮答案

【问题标题】：Align button vertically in alert field在警报字段中垂直对齐按钮
【发布时间】：2013-08-12 17:52:45
【问题描述】：

我想将按钮（按钮样式的锚点，但按钮也一样）垂直居中对齐，但似乎有一点偏移。

这是我使用的html代码：

<div class="alert alert-info">
    Text on the left
    <p class="pull-right">
        <a class="btn btn-default" href="#">Link</a>
    </p>
</div>

这是它在 jsfiddle 中的样子： http://jsfiddle.net/TeAvH/

【问题讨论】：

标签： css button twitter-bootstrap alignment stylesheet

【解决方案1】：

似乎发生这种情况是因为按钮类具有display:inline-block 属性。将其更改为 display:inline 应该可以解决问题。

.alert p .btn {
    display:inline;
}

Updated fiddle here.

这是默认的.btn 类属性：

.btn {
  display: inline-block;
  padding: 6px 12px;
  margin-bottom: 0;
  font-size: 14px;
  font-weight: bold;
  line-height: 1.428571429;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: 4px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}

【讨论】：

【解决方案2】：

当您使用pull-right 时，Bootstrap 正在应用float:right。这会将元素从文档流中移除，这意味着它将不再影响其父容器的高度。这是您需要解决的第一件事。有几种不同的方法，但我最喜欢的是将overflow:auto 应用于父元素。

既然这个问题解决了，你还是要处理文本的行高和按钮的高度不一样的问题。要解决这个问题，只需指定行高。在这种情况下，按钮的高度为36px，因此您可以使用line-height:36px。

这是一些工作代码（这是更新后的fiddle）：

HTML

<div class="alert alert-info">
Text on the left
<a class="btn btn-default pull-right" href="#">Link</a>
</div>

CSS

div {
    overflow: auto;
    line-height: 36px;
}

【讨论】：

【解决方案3】：

首先，请注意某些 HTML 元素确实具有默认边距和/或填充。更多关于 here.

为了更好地控制在这种情况下发生的事情，您可以将文本和其他元素放在 <div> 中，分别向左和向右浮动。

【讨论】：