如何在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

使div的line-height与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>