twitter-bootstrap 在 Bootstrap 3 警报中垂直对齐文本和按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22071677/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Vertically align text and button inside Bootstrap 3 alert
提问by muenchdo
I'm trying to vertically align text (pulled left) and a button (pulled right) inside a Bootstrap 3 alert. Somehow like this:
我正在尝试在 Bootstrap 3 中垂直对齐文本（向左拉）和按钮（向右拉）alert。有点像这样：
+------------------------------------------------+
| Some text [A button] |
+------------------------------------------------+
What I have so far is the following (Bootply):
到目前为止，我所拥有的是以下内容（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>
The button is perfectly aligned (this was actually my first problem, solved here), but now the text is out of center.
按钮完全对齐（这实际上是我的第一个问题，在这里解决了），但现在文本不在中心。
I appreciate your help!
我感谢您的帮助！
采纳答案by adrift
Assuming you don't want to use line-height, you can also try:
假设您不想使用 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%;
}
回答by n1kkou
use display:table; width:100%;for the alert div, and for the ptag remove the float and use display:table-cell; vertical-align:middle.
You can use the same rules for the button.
使用display:table; width:100%;的警报DIV，并为p标签去除浮动和使用display:table-cell; vertical-align:middle。
您可以对按钮使用相同的规则。
回答by Travis
Here ya go i updated bootply here http://www.bootply.com/117259
好了，我在这里更新了 bootply http://www.bootply.com/117259
All i did was add some line height on the pull-left class
我所做的只是在 pull-left 类上添加一些行高
.pull-left{line-height:30px}
That should do the trick
这应该够了吧
