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

I have a div with a height of 30px.

我有一个高度为30px的div。

I want to add plain text to this div. How can I make the plain text appear on the center of my div? i.e, the text will be shown 15px under the top of the div.

我想在这个div中添加纯文本。如何将纯文本显示在div的中心？即，文本将在div的顶部显示15px。

I tried a label with margin-top:15; but it didn't work.

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

8 个解决方案

#1

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

#2

Following CSS would work

以下CSS可行

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

#3

You can:

您可以：

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

Set the line-height of the text helps you to fit the height for one line only.

设置文本的行高可帮助您仅适合一行的高度。

#4

Use padding-top instead of margin-top. Remember that adding padding to the top is added to the height, so you need to reduce the amount that you use for padding from the height. If you just always want for the text to have 15px on top and bottom of it, just simply do:

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

padding: 15px 0px;

Without specifying height at all.

没有指定高度。

#5

padding-top: 15px;

padding-top：15px;

remove 15px from the height on the div to.

从div上的高度移除15px到。

you should have a look at padding http://www.w3schools.com/css/css_padding.asp

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

#6

if you want anything to be in center of it's parent, just give the parent specific width using style and give the child style="margin:0 auto". good luck

如果你想要任何东西都在它的父级中心，只需使用样式给出父级特定宽度，并给出子样式=“margin：0 auto”。祝你好运

#7

The <label></label> Element is not a block level element it is an inline element.

元素不是块级元素，而是内联元素。

Try this code <div style="height:30px"> <label style="display:block; margin-top:15px;"> </label> </div>

试试这个代码

#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;
}

#1

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

#2