CSS将文本垂直对齐到div的中间 [英] CSS to vertically align text to middle of div

问题描述

强制在div中的文本与中间垂直对齐的正确方法是什么？
我发现了一对夫妇的技巧，但我需要一个单行和多行的工作。希望我缺少一些简单的东西：

http://jsfiddle.net/ rogerguess / DawFy /

  .header {
 display：inline-block; 
 text-align：center; 
 width：123px; 
 background：green; 
 border-radius：4px 4px 4px 4px; 
 height：80px; 
 vertical-align：middle; 
} 
 
< div> 
< div class =header> test1< / div> 
< div class =header>一些文本将包装< / div> 
< div class =header> test3< / div> 
< / div> 
   更改 display：inline-块; 到 display：table-cell;  
 
What is the correct way to force text in a div to vertically align to the middle?
I have found a couple 'tricks', but I need something that works with a single line and multiple lines. Hopefully I am missing something stupid simple:

http://jsfiddle.net/rogerguess/DawFy/
.header {
    display: inline-block;    
    text-align: center;
    width: 123px;
    background: green;
    border-radius: 4px 4px 4px 4px;
    height: 80px;
    vertical-align: middle;
}

<div >
    <div class="header">test1 </div>
    <div class="header">some text that will wrap</div>
    <div class="header">test3</div>
</div>

解决方案
Change display: inline-block; to display: table-cell;

                        
这篇关于CSS将文本垂直对齐到div的中间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！