Question

我正试图在Bootstrap 3 alert内垂直对齐文本（向左拉）和一个按钮（向右拉）。不知怎的，这样：

+------------------------------------------------+
| Some text                           [A button] |
+------------------------------------------------+

到目前为止我所拥有的是以下内容（Bootply）：

<div class="alert alert-info" style="overflow:hidden">
    <p class="pull-left">Some text</p>
    <button class="btn btn-sm btn-default pull-right">A button</button>
</div>

按钮完全对齐（这实际上是我的第一个问题，已解决here），但现在文本已偏离中心。

感谢您的帮助！

Answer 1

假设您不想使用行高，您也可以尝试：

div.alert-info {
    position: relative;
}

div.alert-info p.pull-left {
   -webkit-transform: translateY(-50%);
   -ms-transform: translateY(-50%);
   -o-transform: translateY(-50%);
    transform: translateY(-50%);
    position: absolute;
    top: 50%;
}

http://www.bootply.com/117260

Answer 2

对警报div使用display:table; width:100%;，对p标记移除浮动并使用display:table-cell; vertical-align:middle。
您可以对按钮使用相同的规则。

Answer 3

在这里，我在这里更新了bootply http://www.bootply.com/117259

我所做的就是在拉左类上添加一些行高

 .pull-left{line-height:30px}

应该做的伎俩

在Bootstrap 3警报内垂直对齐文本和按钮

3 个答案: