如何在div的顶部和底部之间居中文本？

我想将我的文本对齐到我的div中间，但我似乎无法使其工作。我怎样才能做到这一点？如何在div的顶部和底部之间居中文本？

感谢您的帮助！

<div style="height:40px;">Personal Information</div>

“个人信息”应该位于顶部和底部之间。

来源

2011-02-02 Andrew

请在这里展示您的问题：http://jsfiddle.net/ – Hawxby 2011-02-02 21:25:12

制作行高元素的大小。但是，只有当你只有一行文字时才会有效。

来源

2011-02-02 21:26:25 yoda

CSS：

myDiv 
{ 
display:table-cell; 
vertical-align:middle; 
}

INLINE：

<div style="display:table-cell; vertical-align:middle;">Personal Information</div>

UPDATE：

这部作品的jsfiddle ...

div { 
display:table-cell; 
width: 200px; 
height: 200px; 
vertical-align:middle; 
background: red; 
}

来源

2011-02-02 21:28:11

http://jsfiddle.net/sefej/ – yoda 2011-02-02 21:29:51

可以使用table-cell显示风格实现这一点：

CSS

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

来源

2011-02-02 21:30:05

试试这个（黄有没有表明它是在div

<html> 
    <body> 
    <div style="height:40px; background-color:yellow"> 
    <div style="position:absolute; top:50%; display:table">Personal Information</div> 
    </div> 

    </body> 
    </html>

来源

2011-02-02 21:38:23

如何

这个中心？

CSS：

#outer { 
    height: 400px; 
    overflow: hidden; 
    position: relative; 
    width: 100%; 
} 

#outer[id] { 
    display: table; 
    position: static; 
} 

#middle { 
    position: absolute; 
    top: 50%; 
    width: 100%; 
    text-align: center; 
} /* for explorer only */ 

#middle[id] { 
    display: table-cell; 
    vertical-align: middle; 
    position: static; 
} 

#inner { 
    position: relative; 
    top: -50%; 
    text-align: center; 
} /* for explorer only */ 

#inner { 
    margin-left: auto; 
    margin-right: auto; 
} 

div.greenBorder { 
    border: 1px solid green; 
    background-color: ivory; 
}

HTML

<div id="outer" class="greenBorder"> 
    <div id="middle"> 
     <div id="inner" class="greenBorder"> center 

     </div> 
    </div> 
</div>

http://jsfiddle.net/3NjUF/4/

这与40像素的高度： http://jsfiddle.net/3NjUF/5/

来源

2011-02-02 21:44:36 ngen

可以使用保证金的绝招： 0自动;将div内的内容对齐到中心。在这种情况下，下面的代码应该工作正常，

HTML：

<div style="height:40px;"><span>Personal Information</span></div>

CSS：

span 
    { 
     width: 50%; 
     margin: 20px auto; 
     text-align: center; 
     display:block 
    }

来源

2016-09-09 10:17:58

如何在div的顶部和底部之间居中文本？

回答

相关问题