如何在div中垂直居中一个标签？

Question

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

我想在这个div中添加普通文本。如何使纯文本显示在div的中心位置？ 也就是说，文本将显示在div顶部下方15px的位置。

我尝试使用带margin-top: 15;的标签，但效果不佳。

- hubert

Answer 1

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

- Björn

Answer 2

以下 CSS 可以起作用

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

- Ketan Khairnar

---

@DisgruntledGoat 在IE8上工作，这个问题具体是在哪个版本的IE中无法工作？ - anpatel

@MyName 这个答案最初是在 3年前 发布的，当时IE6和IE7仍占据着很大的市场份额。所以现在使用它应该是可以的。 - DisgruntledGoat

@DisgruntledGoat 啊，对不起，我应该看一下这篇文章发布的日期。但是这很有道理。谢谢！ - anpatel

Answer 3

你可以：

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

设置文本的line-height属性可以帮助你适应单行的高度。

- mauris

---

将行高添加到我的 div 样式中解决了这个问题。 - Ziggler

Answer 4

虽然这是一个旧的主题，但我认为应该介绍一种flex解决方案。 如果您使用以下样式设置您的

display: flex; 
align-items: center;

应该可以工作。

Codesandbox

- Apostolos

Answer 5

使用padding-top代替margin-top。请记住，将padding添加到顶部会增加高度，因此您需要从高度中减少用于padding的量。如果您希望文本始终在顶部和底部具有15px，请只需简单地执行以下操作：

padding: 15px 0px;

没有指定高度。

- reko_t

---

我认为提问者希望它是30像素，包括文本高度。 - mauris

烦人的时间处理联系表单的样式问题，您的建议解决了它，谢谢！ - dcparham

Answer 6

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

- Adam

Answer 7

padding-top: 15px;

从 div 的高度中减去 15px。

你应该查看 padding http://www.w3schools.com/css/css_padding.asp

- Dejan.S

---

你忘记了考虑文本的高度。 - mauris

Answer 8

如果你想让任何元素在其父级居中，只需使用样式为父级指定特定宽度，并为子元素添加style="margin:0 auto"。 祝好运

- AliBZ

---

水平和非IE6，没问题。但问题是关于垂直定位的。 - Björn

Answer 9

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

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

- Kieran