如何将div中的标签垂直居中？

Question

我有一个div高度30px.

我想为此添加纯文本div.如何将纯文本显示在div的中心？即,文本将显示15px在顶部div.

我尝试了一个带有margin-top的标签:15; 但它不起作用.

Answer 1

height: 30px; line-height: 30px; padding: 0;

Answer 2

以下CSS可行

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

Answer 3

您可以:

<div style="height:30px; line-height:30px; text-align:center;">
    Label
</div>

设置line-height文本可帮助您仅适合一行的高度.

Answer 4

虽然这是一个旧线程，但我认为flex也应该提出一个解决方案。如果你的 div 样式是

display: flex; 
align-items: center;

它应该有效

Answer 5

使用 padding-top 而不是 margin-top。请记住，向顶部添加内边距会添加到高度中，因此您需要从高度中减少用于内边距的量。如果您总是希望文本顶部和底部均为 15px，只需执行以下操作：

padding: 15px 0px;

根本没有指定高度。