在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>

按钮已经完全对齐（这其实是我的第一个问题，已在此处得到解决），但现在文本不居中了。

非常感谢您的帮助！

- muenchdo

---

你能为此设置一个 jsfiddle 吗？ - Travis

@Travis，我已经包含了一个Bootply的链接，你为什么还需要一个fiddle？ - muenchdo

哈哈，我错过了，对此感到抱歉。 - Travis

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

- Adrift

---

我接受了这个答案，因为它对我来说似乎是最灵活的。 - muenchdo

Answer 2

使用 display:table; width:100%; 来设置警告框的样式，对于 p 标签，去除浮动属性并使用 display:table-cell; vertical-align:middle 居中。
按钮也可以使用相同的规则。

- n1kkou

Answer 3

这里是更新后的 Bootply http://www.bootply.com/117259。

我只是在 pull-left 类上添加了一些行高。

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

那应该就可以了

- Travis

---

如果不同的警报有不同数量的文本怎么办？行高必须进行调整。如果他需要在其他地方使用.pull-left呢？ - royhowie

同意，但那不是问题，只需为此特定警报使用ID...更新的bootply http://www.bootply.com/117264 - Travis