如何在Twitter Bootstrap中将文本与CSS的元素的中间对齐？ [英] How do I align text to the middle of an element with CSS in Twitter Bootstrap?

问题描述

我使用 Bootstrap 提醒，这是我的成功提醒讯息：

I am using Bootstrap alerts and this is my success alert message:

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

结果是：

img src =https://i.stack.imgur.com/NKZG5.pngalt =上面HTML的结果图片>

请看文本对齐位于< div> 的顶部。

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?

我已经尝试使用 padding-top 和 vertical-align：middle 但都不工作（我最终得到相同的结果）。

I have tried using padding-top and vertical-align:middle but neither works (I end up with the same result).

我需要做什么改变文本的垂直方向？

What do I need to do to change the vertical alignment of the text?

推荐答案

设置 line-height 与div的 height 相同，例如：

Make the line-height of the div the same as the height of the div, eg:

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

这只有在您有一行文本时才能使用。

This will only work if you have one line of text.

这篇关于如何在Twitter Bootstrap中将文本与CSS的元素的中间对齐？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！