CSS实现li横向居中显示的方法

先给一个简单的示例HTML代码

  1. <div class="title"> 
  2. <ul> 
  3. <li>标题一</li> 
  4. <li>标题二</li> 
  5. <li>标题三</li> 
  6. <li>标题四</li> 
  7. <li>标题五</li> 
  8. </ul> 
  9. </div> 

以前为了让li中的元素横向并列展示,总是对li设置float:left。效果如下。

CSS实现li横向居中显示的方法_新客网

但是我想让标题居中显示是除了设置margin-left外没有别的办法。这还不能绝对剧中。

后面发现只需要简单的两部。

一,设置li的 display:inline;就可以让其横向展示。

二,设置上一层DIV的text-align:center;

  1. .title   
  2.      {   
  3.       text-align:center;   
  4.      }   
  5. ul li   
  6.      {   
  7.        list-style-type:none;   
  8.        display:inline;   
  9.      }   

CSS实现li横向居中显示的方法_新客网