Question

我正在尝试将ul与div的中心对齐，但是我的HTML代码不在这里：

<div id="container">  
  <div id="footer">  
    <ul id="footer_links">  
      <li><a href="...">About</a></li>  
      <li><a href="...">Faq</a></li>  
      <li><a href="...">How Rang De Works</a></li>  
      <li><a href="...">Contact</a></li>  
      <li><a href="...">Support</a></li>  
    </ul>  
  </div>  
<div>

我的CSS是：

#container {width:975px;margin:0 auto;}  
#footer {text-align:center;}  
ul#footer_links {margin:0px;text-align:center;}  
ul#footer_links li {float:left; list-style:none; padding:10px 0px 0px 20px;}

链接到HTML code

Answer 1

从float: left移除ul#footer_links li并改为使用display: inline

JSFiddle：http://jsfiddle.net/Efbjv/1/

Answer 2

text-align:center;只是将纯文本对齐在元素中。如果要将块元素居中，则应在要居中的元素中使用margin-left: auto;margin-right: auto;。

Answer 3

#footer{
    text-align:center;
}
ul#footer_links{
   margin:0px auto;
   width:90%;
}

Answer 4

#container{width:975px;margin:0 auto; border:1 px solid #000;}
#footer{text-align:center;}
ul#footer_links{margin:0 auto; text-align:center;}
ul#footer_links li{ list-style:none;  display:inline; padding:10px 0px 0px 20px;}

应该解决问题，将ul＃footer-links更改为居中而li元素现在是内联的，因此它不会在每个li之后生成换行符。

Answer 5

CSS属性text-align仅影响内联元素，而不影响块元素。因此，您必须将ul和li元素设为内联，例如：

#container{ width:975px; margin:0 auto; }
#footer{ text-align:center; }
ul#footer_links{ margin:0px;text-align:center; display:inline; }
ul#footer_links li{ display:inline; list-style:none; padding:10px 0px 0px 20px; }

html中心对齐不起作用

5 个答案: