中心元素

Question

我無法定心另一個元素中的元素是固定不變的：

bottombanner是HTML體內：

<div id="bottombanner"> 
<div> 
    <ul> 
     <li><a href="contact.html">ContactUs</a></li> 
     <li><a href="about.html">AboutUs</a></li> 
     <li><a href="help.html">Help</a></li> 
     <li><a href="bugs.html">BugReportBox</a></li> 
     <li><a href="suggestions.html">SuggestionBox</a></li> 
    </ul> 
</div> 
</div> 

CSS是正確鏈接：

#bottombanner{ 
    position:fixed; 
    width:100%; 
    bottom:0; 
    } 

    #bottombanner > div { 
    position:absolute; 
    width:100%; 
    } 

    #bottombanner > div > ul { 
    position:relative; 
    margin-left:auto; 
    margin-right:auto; 
    -webkit-margin-start: auto; 
    -webkit-margin-end: auto; 
    -webkit-padding-start: 0; 
    } 

Answer 1

添加高度#bottombanner（至少，有必要對我的小提琴），並添加text-align: center到#bottombanner > div：

#bottombanner{ 
    position:fixed; 
    width:100%; 
    bottom:0; 
    height: 130px; 
} 

#bottombanner > div { 
    position:absolute; 
    width:100%; 
    text-align:center; 
} 

#bottombanner > div > ul { 
    position:relative; 
    margin-left:auto; 
    margin-right:auto; 
    -webkit-margin-start: auto; 
    -webkit-margin-end: auto; 
    -webkit-padding-start: 0; 
} 

小提琴：http://jsfiddle.net/kboucher/cFgNx/

Answer 2

您必須設置居中元素的顯示屬性以阻止並設置元素的寬度。

#bottombanner > div > ul { 
position:relative; 
margin-left:auto; 
margin-right:auto; 
-webkit-margin-start: auto; 
-webkit-margin-end: auto; 
-webkit-padding-start: 0; 
display:block; 
width:200px; 
}