如何在CSS中的網站導航欄中居中對齊文本？

對於如何將文本置於導航欄上的方式，我現在有點難以忍受，因爲此時它只是走向左側。我已經嘗試了中央對齊，但它仍然繼續堅持到一邊。如果任何人都可以告訴我我正在做什麼錯誤將不勝感激。如何在CSS中的網站導航欄中居中對齊文本？

HTML：

<body> 
<div id="wrap"> 
</div> 
    <ul id="nav"> 
    <li><a href="#">About Us</a></li> 
    <li><a href="#">Our Products</a></li> 
    <li><a href="#">FAQs</a></li> 
    <li><a href="#">Contact</a></li> 
    <li><a href="#">Login</a></li> 
</ul> 
<div id="content"> 
</div> 
</body>

CSS：

body { 
    margin: 0; 
    padding: 0; 
    text-align: justify; 
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; 
    font-size: 13px; 
    background-color:#425eb4; 
} 
*{ 
    margin: 0 auto 0 auto; 
} 

#wrap { 
    height:150px; 
    background:url(images/header1.png) no-repeat center; 
    text-align:center; 
    background-color:#FFF; 
} 

#nav { 
    width: 100%; 
    float: left; 
    padding: 0; 
    list-style: none; 
    background-color: #f2f2f2; 
    border-bottom: 1px solid #ccc; 
    border-top: 1px solid #ccc; } 
#nav li { 
    float: left; 
    text-align:center; } 
#nav li a { 
    display: block; 
    padding: 8px 15px; 
    text-decoration: none; 
    font-weight: bold; 
    text-align:center; 
    color: #069; 
    border-right: 1px solid #ccc; } 
#nav li a:hover { 
    color: #c00; 
    text-align:center; 
    background-color: #fff;} 
    /* End navigation bar styling. */ 

#content { 
    padding: 0 50px 50px; 
    width:1000px; 
    height:800px; 
    background-color:#FFF; 
}

來源

2013-09-27 user2602766

你需要採取float:left關掉你的#nav和li元素。然後將display:inline-block;添加到兩者。接下來將您的text-align:center添加到#nav。

#nav { 
    width: 100%; 
    display: inline-block; 
    text-align: center; 
    padding: 0; 
    list-style: none; 
    background-color: #f2f2f2; 
    border-bottom: 1px solid #ccc; 
    border-top: 1px solid #ccc; 
    margin-left: 0px; // looks like bootstrap is putting a left margin on your #nav you may want it off. 

} 
#nav li { 
    display: inline-block; 
    text-align:center; 
}

來源

2013-09-27 17:35:35 Trevor

@ user2602766如果回答您的問題，請標記爲已接受的答案，否則請提供有關未解決問題的反饋。謝謝 – Trevor

謝謝，爲我工作！投了！ –

使用此CSS：

就拿浮起，用display:inline-block把li s各自其他的旁邊，使用文本對齊：中心的#nav。這是你在找什麼？

body { 
    margin: 0; 
    padding: 0; 
    text-align: justify; 
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; 
    font-size: 13px; 
    background-color: #425eb4; 
} 

* { 
    margin: 0 auto; 
} 

#wrap { 
    height: 150px; 
    background: url(images/header1.png) no-repeat center; 
    text-align: center; 
    background-color: #FFF; 
} 

#nav { 
    width: 100%; 
    margin: 0; 
    padding: 0; 
    text-align: center; 
    list-style: none; 
    background-color: #f2f2f2; 
    border-bottom: 1px solid #ccc; 
    border-top: 1px solid #ccc; 
} 

#nav li { 
    display: inline-block; 
    text-align: center; 
} 

#nav li a { 
    display: block; 
    padding: 8px 15px; 
    text-decoration: none; 
    font-weight: 700; 
    text-align: center; 
    color: #069; 
    border-right: 1px solid #ccc; 
} 

#nav li a:hover { 
    color: #c00; 
    text-align: center; 
    background-color: #fff; 
} 

/* End navigation bar styling. */ 
#content { 
    padding: 0 50px 50px; 
    width: 1000px; 
    height: 800px; 
    background-color: #FFF; 
}

來源

2013-09-27 17:38:11 Scott

IMO調整你的CSS要的東西普遍喜歡（我省略具體數值對你的代碼，只是包括你的總體目標，通常需要的）：

#wrap { 
    width:100%; 
} 

#nav { 
    width:300px; //however wide your nav container needs 
    margin:auto; //this is what will center an elem, relative to its parent (in 
       //this case a 100% wide wrap; the 100% is relevant because it 
       //keeps things centered as window is resized. 
}

來源

2013-09-27 17:40:47

都好投入，我覺得這將幫助別人太,,,
我用這樣的事情通常，它的平衡/中心/和塊等等都是可點擊

<head> 
<style> 

ul { 
list-style-type: none; 
margin: 0; 
padding: 0; 
text-align: center; 
} 

a { 
display: inline-block; 
width: 80px; 
background-color: #dddddd; 
text-align: center; 
} 

li { 
width: 100px; 
margin: auto; 
display: inline; 
} 

p { 
clear: both; 
margin: 10px 5px; 
text-align: center; 
background-color: yellow; 
} 

</style> 
</head> 
<body> 

<ul> 
<li><a href="#">Home</a></li> 
<li><a href="#">News</a></li> 
<li><a href="#">Contact</a></li> 
<li><a href="#">About</a></li> 
</ul> 

<p>Notice we are all centered</p> 
<p>A background color is added to the links to show the link area.</p> 
<p>Notice that the whole link area is clickable, not just the text.</p> 

</body>

來源

2015-05-18 18:59:59 TheRocker

如何在CSS中的網站導航欄中居中對齊文本？

回答

相關問題