css - 如何在 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>. 那么，我如何将它对齐到中间呢？

我尝试过使用padding-top，vertical-align:middle但都不起作用（我最终得到了相同的结果）。

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

Answer 1

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

让它更容易;)！尝试使用警报块！这适用于最新的 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>