[英]Vertically align text and button inside Bootstrap 3 alert
I'm trying to vertically align text (pulled left) and a button (pulled right) inside a Bootstrap 3 alert
. 我正试图在Bootstrap 3
alert
内垂直对齐文本(向左拉)和一个按钮(向右拉)。 Somehow like this: 不知何故这样:
+------------------------------------------------+
| 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! 我感谢您的帮助!
Assuming you don't want to use line-height, you can also try: 假设您不想使用行高,您还可以尝试:
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%;
}
use display:table; width:100%;
使用
display:table; width:100%;
display:table; width:100%;
for the alert div, and for the p
tag remove the float and use display:table-cell; vertical-align:middle
对于alert div,对于
p
标签,删除float并使用display:table-cell; vertical-align:middle
display:table-cell; vertical-align:middle
. display:table-cell; vertical-align:middle
。
You can use the same rules for the button. 您可以对按钮使用相同的规则。
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{line-height:30px}
That should do the trick 这应该够了吧
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.