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

我有一个div与高度30px。如何在一个div中垂直居中放置一个标签？

我想向此div添加纯文本。我怎样才能使纯文本出现在我的div的中心？即，该文本将在div的顶部被显示为15px。

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

2009-11-03 hubert

使用padding-top而不是margin-top。请记住，向顶部添加填充将添加到高度，因此您需要从高度减少用于填充的数量。如果您只希望文本的顶部和底部有15像素，只需执行以下操作：

padding: 15px 0px;

根本没有指定高度。

来源

2009-11-03 12:56:17

我觉得提问者希望它是30像素，文字高度的包容性。 – mauris 2009-11-03 12:58:36

讨厌的时间处理造型这种联系形式，你的建议解决了它，thx！ – dcparham 2017-01-16 00:12:46

padding-top：15px;

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

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

来源

2009-11-03 12:56:41

你忘记了考虑文本的高度。 – mauris 2009-11-03 12:59:25

您可以：

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

设置文本的line-height帮助您适应高度只有一行。

来源

2009-11-03 12:57:41 mauris

向我的div风格添加行高解决了问题 – Ziggler 2016-04-12 21:53:12

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

来源

2009-11-03 12:58:24

感谢Man。它帮助我.. – Krishnan 2011-07-08 05:11:43

如果你想要任何东西在它的父母的中心，只要给出父母使用风格的特定宽度，并给孩子style =“margin：0 auto”。好运

来源

2009-11-03 12:59:19 AliBZ

水平和非IE6，是的。但问题是关于垂直定位。 – 2009-11-03 13:01:03

以下CSS将工作

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

来源

2009-11-03 13:00:40

虽然不在IE中... – DisgruntledGoat 2009-11-03 13:12:38

@DisgruntledGoat在IE8中工作，哪个IE专门做这个不行？ – anpatel 2012-03-29 19:30:39

@MyName这个答案最初发布** 3年前**，当时IE6和IE7仍然有很大的市场份额。所以现在应该可以使用。 – DisgruntledGoat 2012-03-30 11:01:34

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

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

来源

2009-11-04 03:18:45 Kieran

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

来源

2011-09-19 15:43:05 Adam

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

回答

相关问题