Question

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

这是我使用的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/

Answer 1

当您使用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;
}

Answer 2

看来这是因为按钮类具有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;
}

Answer 3

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

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

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

3 个答案: