如何在Twitter Bootstrap中使用CSS将文本与元素的中间对齐？

Question

我正在使用Bootstrap警报,这是我成功的警报消息:

<div class="alert alert-success" id="UploadSuccess">
    <a class="close" data-dismiss="alert">×</a>
    <strong>Congrats!</strong> You have successfully did it!.
</div>

结果是:

你可以看到文本对齐位于顶部<div>.那么,II如何将它与中间对齐？

我已经尝试使用padding-top和vertical-align:middle,但没有工作(我结束了相同的结果).

我需要做些什么才能更改文本的垂直对齐方式？

Answer 1

使line-heightdiv的div与div的相同height,例如:

#UploadSuccess { height: 20px; line-height: 20px; }

这仅在您有一行文本时才有效.

Answer 2

尝试垂直居中文本文本是一个常见问题.通常这不适用于普通的盒子,但你可以强制它使用垂直对齐:

vertical-align: middle;
display: table-cell;

但是这在IE7及更低版本中不起作用.

如果您确定要显示的文本,可以使用line-height伪造效果,如下所示:

height: 40px;
line-height: 40px; /* same as height */

这种方式适用于跨浏览器并且支持IE5.5我相信.如果这不是一个选项,我担心你运气不好(无法做到).

作为旁注,错误信息会受到语法错误的影响,应该是"恭喜!你已经成功完成了它.".

Answer 3

让它更容易;)!尝试使用alert-block!这与最新的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>