在 Bootstrap 3 警报中垂直对齐文本和按钮答案

【问题标题】：Vertically align text and button inside Bootstrap 3 alert在 Bootstrap 3 警报中垂直对齐文本和按钮
【发布时间】：2014-02-27 14:38:35
【问题描述】：

我正在尝试在 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），但现在文本不在中心。

感谢您的帮助！

【问题讨论】：

你能为此设置一个小提琴吗？
@Travis 我已经包含了一个 bootply 的链接，你为什么需要一个小提琴？
哈哈我错过了那个对不起

标签： html css twitter-bootstrap

【解决方案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

【讨论】：

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

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

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

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

这应该可以解决问题

【讨论】：

如果不同的警报有不同数量的文本？必须调整行高。如果他需要在其他地方使用.pull-left 怎么办？
同意，但这不是问题，只需为这个特定警报使用一个 ID...更新 bootply bootply.com/117264