如何水平對齊導航並居中？

我需要將div中的導航鏈接居中，並水平對齊。我試過這種方法，但沒有奏效。如何水平對齊導航並居中？

修復了#centermenu之前的錯誤，謝謝，但是stil不起作用。

  <nav id="centermenu"> 
        <ul> 
         <li><a href="#">Business</a></li> 
         <li><a href="#">Specialities</a></li> 
         <li><a href="#">Contact us</a></li> 
        </ul> 
      </nav>

CSS：

#centermenu { 
float: left; 
width: 100%; 
border-bottom: 2px solid #011; 
background: #ffe; 
overflow: hidden; 
position: relative; 
} 

#centermenu ul { 
float: left; 
clear: left; 
position: relative; 
list-style: none; 
display: block; 
text-align: center; 
} 


#centermenu ul li { 
display: block; 
float: left; 
list-style: none; 
margin: 1em; 
padding: 1em; 
}

感謝

來源

2012-02-12 Linards Berzins

似乎是在UL-部分打字錯誤。

Cetermenu ul

代替OFF

Centermenu ul

編輯：

以下似乎爲我工作。也許可以逐個添加其他標籤以查看是否中斷。

#centermenu { 
float: left; 
width: 100%; 
    text-align: center; 
border-bottom: 2px solid #011; 
background: #ffe; 
overflow: hidden; 
position: relative; 
} 

#centermenu ul { 
margin: 2 auto; 
display: block 
} 


#centermenu ul li { 
display: inline; 
text-align: center; 
margin: 1em; 
padding: 1em; 
}

來源

2012-02-12 19:08:05

修正了#centermenu，由於以前的錯誤，但還是老樣子不起作用。刪除了左邊：50％的聲明，也沒有。 – 2012-02-12 19:35:28

改變你的左邊從50％至25％

http://jsfiddle.net/ZW9Qp/

#centermenu { 
    float: left; 
    width: 100%; 
    border-bottom: 2px solid #011; 
    background: #ffe; 
    overflow: hidden; 
    position: relative; 
    } 
    #centermenu ul { 
    float: left; 
    clear: left; 
    position: relative; 
    list-style: none; 
    left: 25%; 
    display: block; 
    text-align: center; 
    } 
    #centermenu ul li { 
    display: block; 
    float: left; 
    list-style: none; 
    margin: 1em; 
    padding: 1em; 

}

來源

2012-02-12 19:36:00

謝謝，但它不是中間的，但需要谷歌更徹底。乾杯 – 2012-02-12 19:43:40

如何水平對齊導航並居中？

回答

相關問題