ul 列表不在屏幕中居中答案

【问题标题】：ul list not centering in screenul 列表不在屏幕中居中
【发布时间】：2013-04-19 11:36:13
【问题描述】：

我一直在网上四处寻找，看不出我的列表没有居中的原因

这是html

  <div id="footer" class="clear">   
            <ul id="nav2">
               <li><a href="#">CONTACT</a></li>
               <li><a href="https://www.facebook.com/tcstrathclyde?ref=ts&fref=ts"><img src="images/facebook.png" /></a></li>
               <li><a href="#">ABOUT US</a></li>
            </ul>
            <div class="copyright"> Copyright 2013 Teen Challenge Strathcylde. All rights reserved. Charity No: SC022209</div>
 </div><!--footer-->

和css

#footer {
width: 960px; height: 100px;   margin: 0 auto;
}

#footer ul#nav2 {
list-style: none; margin: 18px auto;
}
#footer ul#nav2 li {
    float: left; padding: 0 0 0 30px; margin: 0 100px 0 0;
}

#footer ul#nav2 a img {position:relative; bottom:10px; }

        #footer ul#nav2 li:first child { background:none; } 

        #footer ul#nav2 li a {
            font-size: 30px; color: #222930; font-family:Tahoma, Geneva, sans-serif; text-decoration: none; 
        }

            #footer ul#nav2 li a:hover, #header ul#nav1 li a:active {
                color: #e9e9e9;
            }

任何帮助将不胜感激谢谢:)

【问题讨论】：

居中是什么意思？你能给我们举个例子吗？
我想在屏幕上居中显示ul列表

标签： html css html-lists centering

【解决方案1】：

试试这个 CSS

#footer {
    width: 960px;
    height: 100px;
    margin: 0 auto;
    text-align: center;
}
#footer ul#nav2 {
    list-style: none;
    padding: 0;
}
#footer ul#nav2 li {
    display: inline-block;    
    margin: 0 10px;
    width: 150px;
}
#footer ul#nav2 a img {
    position:relative;
    bottom:10px;
}
#footer ul#nav2 li:first child {
    background:none;
}
#footer ul#nav2 li a {
    font-size: 30px;
    color: #222930;
    font-family:Tahoma, Geneva, sans-serif;
    text-decoration: none;
}
#footer ul#nav2 li a:hover, #header ul#nav1 li a:active {
    color: #e9e9e9;
}

Example

【讨论】：