1

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

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

4

3 回答 3

3

When you use pull-right, Bootstrap is applying float:right. This removes the element from document flow, meaning that it will no longer affect the height of its parent container. This is the first thing you need to fix. There are a few different methods, but my favorite is applying overflow:auto to the parent element.

Now that this problem is solved, you still have to deal with the fact that the line height of the text is not the same as the height of the button. To fix that, simply assign the line height. In this case, the button has a height of 36px, so you can use line-height:36px.

Here's some working code (and here's the updated 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;
}
于 2013-08-11T07:32:00.570 回答
3

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

.alert p .btn {
    display:inline;
}

在这里更新了小提琴。

这是默认的.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;
}
于 2013-08-11T07:46:04.650 回答
0

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

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

于 2013-08-11T07:35:00.727 回答