CSS:水平和垂直中心文本？

Question

我正在创建一个新网站,我需要知道一些事情(将以示例显示).

让我说我这样做:

HTML;

<div id="center-in-bar">
   <ul>
       <li>content..</li>
       <li>content..</li>
       <li>content..</li>
       <li>content..</li>
</div>

和css:

#center-in-bar {
   list-style:none;
   display:inline-block;
   /*what to do to make all the li elements centered both horizontal and vertical? in the center-in-bar element*/
}

如何使所有li元素在水平和垂直方向都居中？在中心杆元素？

任何帮助将是appriciated :))

Answer 1

试试这个CSS片段:

#center-in-bar ul {
    ...
    text-align:center; /* center horizontally */
    vertical-align:middle; /* center vertically */
    ...
}
#center-in-bar li {
    ...
    display:inline; /* you might want to use this instead of "inline-block" */
    ...
    text-align:center; /* center horizontally */
    vertical-align:middle; /* center vertically */
    ...
}

Answer 2

不知怎的,这样做仍然没有标准,但根据我的经验,以下可能是整体上最可靠的解决方案:

<style type="text/css"> 
    #container {     
        display:table;     
        border-collapse:collapse;   
        height:200px;   
        width:100%; 
        border:1px solid #000; 
    }          
    #layout {     
        display:table-row;    
    }            
    #content {     
        display:table-cell;   
        text-align:center;  
        vertical-align:middle;     
    }            
</style>      
<div id="container">     
    <div id="layout">     
        <div id="content">  
            Hello world!  
        </div>      
    </div>    
</div> 

这是另一种利用相对和绝对定位来模拟中心 - 中间位置的技术.这种技术并不准确,但它应该与任何浏览器兼容(即使是早期的浏览器):

<style type="text/css">
    #vertical{ 
        position:absolute; 
        top:50%; /* adjust this as needed */     
        left:0; 
        width:100%; 
        text-align:center;
    } 
    #container {
        position:relative;
        height:200px;
        border:1px solid #000;
    }
</style>         
<div id="container"> 
    <div id="vertical"> 
        Hello world! 
    </div>               
</div> 

重要的提示:

当这个问题被问到时,有人似乎总是建议line-height作为解决方案,但我会恳请你避开这个建议.当你展示像"Hello World"这样简单的东西时,它看起来很不错,但是line-height当文字包装时会突然断裂.