html - 在 Bootstrap 3 警报中垂直对齐文本和按钮

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

假设你不想使用line-height，你也可以试试:

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