如何在 Twitter Bootstrap 中使用 CSS 将文本与元素的中间对齐？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10061339/
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
How do I align text to the middle of an element with CSS in Twitter Bootstrap?
提问by coder
I am using Bootstrapalerts and this is my success alert message:
我正在使用Bootstrap警报，这是我的成功警报消息：
<div class="alert alert-success" id="UploadSuccess">
<a class="close" data-dismiss="alert">×</a>
<strong>Congrats!</strong> You have successfully did it!.
</div>
And the result is:
结果是：
As you'll can see that the text alignment is at the top of the <div>. So, how would II align it to the middle?
如您所见，文本对齐方式位于<div>. 那么，我如何将它与中间对齐？
I have tried using padding-topand vertical-align:middlebut neither works (I end up with the same result).
我试过使用padding-topandvertical-align:middle但都不起作用（我最终得到了相同的结果）。
What do I need to do to change the vertical alignment of the text?
我需要做什么来改变文本的垂直对齐方式？
回答by James Zaghini
Make the line-heightof the div the same as the heightof the div, eg:
使line-heightdiv 的 与 div 的相同height，例如：
#UploadSuccess { height: 20px; line-height: 20px; }
This will only work if you have one line of text.
这仅在您有一行文本时才有效。
回答by sg3s
Trying to vertically center text text is a common issue. Normally this wouldn't work on normal boxes, but you can force it to work with vertical align:
尝试垂直居中文本文本是一个常见问题。通常这不适用于普通框，但您可以强制它使用垂直对齐：
vertical-align: middle;
display: table-cell;
However this will not work in IE7 and lower.
但是，这在 IE7 及更低版本中不起作用。
If you are sure the text you want to display you could use line-height to fake the effect like this:
如果您确定要显示的文本，您可以使用 line-height 来伪造这样的效果：
height: 40px;
line-height: 40px; /* same as height */
This way works cross browser and has support up to IE5.5 I believe. If this is not an option I'm afraid you're out of luck (it can't be done).
这种方式适用于跨浏览器，我相信最多支持 IE5.5。如果这不是一个选项，恐怕你不走运（这是不可能的）。
As a side note that error message suffers from bad grammar, it should be "Congratulations! You have successfully done it.".
附带说明一下，错误消息的语法错误，应该是“恭喜！你已经成功完成了。”。
回答by Alexandre Tranchant
Make it easier ;) ! Try to use alert-block ! That works fine with latest Bootstrap version !
让它更容易;)！尝试使用警报阻止！这适用于最新的 Bootstrap 版本！
<div class="alert alert-block alert-success" id="UploadSuccess">
<a class="close" data-dismiss="alert">×</a>
<strong>Congrats!</strong> You have successfully did it!.
</div>
