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

使用padding-top而不是margin-top。请记住，在顶部添加填充添加到高度，因此您需要减少从高处填充的用量。如果你总是希望文本的顶部和底部都有15px，那么只需执行：

padding: 15px 0px;

根本没有指定高度。

Answer 5

padding-top：15px;

从div的高度移除15px到。

你应该看一下填充http://www.w3schools.com/css/css_padding.asp

Answer 6

如果您希望任何内容位于其父级的中心，只需使用样式给出父级特定宽度，并给出子样式=“margin：0 auto”。祝你好运

Answer 7

<label></label>元素不是块级元素，它是内联元素。

试试这段代码 <div style="height:30px"> <label style="display:block; margin-top:15px;"> </label> </div>

Answer 8

#MyDiv
{ 
    background-image: url(images/pagedescription_bar.png);
    background-repeat: repeat-x;
    border-color: #868686;
    border-width: thin;
    border-style: solid;
    border-style: none;
    width: 1008px;
    height:70px;
    color: #FB8022;
    font-size: 16px;
    font-weight: bold;
}

#MyDiv label
{
    width: 1008px;
    text-align: center;
    height: 70px;
    vertical-align: middle;
    display:table-cell;
}

Answer 9

虽然这是一个旧线程，但我认为还应该提供一个 flex 解决方案。如果你用

来设计你的div

display: flex; 
align-items: center;

它应该工作

Codesandbox

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

9 个答案: