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

Posted 2023-03-05

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

【英文标题】：How do I align text to the middle of an element with CSS in Twitter Bootstrap?

【发布时间】：2012-04-21 03:00:37

【问题描述】：

我正在使用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，但都不起作用（我最终得到相同的结果）。

如何更改文本的垂直对齐方式？

【参考方案1】：

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

【讨论】：

将图片上传到其他地方并添加链接。

好主意，对不起^^！你来了！

【参考方案2】：

使div的line-height与div的height一致，例如：

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

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

【参考方案3】：

尝试将文本文本垂直居中是一个常见问题。通常这不适用于普通盒子，但您可以强制它使用垂直对齐：

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

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

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

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

我相信这种方式可以跨浏览器工作，并且支持到 IE5.5。如果这不是一个选项，恐怕你不走运（无法做到）。

附带说明错误消息因语法错误而受到影响，应为“恭喜！您已成功完成。”。

【讨论】：

@sg3s-是的，你是对的，我仍在测试警报，当然语法不好。我会使用正确的。