如何在 CSS 中将网站导航栏中的文本居中对齐？
Posted
技术标签:
【中文标题】如何在 CSS 中将网站导航栏中的文本居中对齐？【英文标题】：How to center align text in navigation bar of website in CSS? 【发布时间】：2013-10-04 02:28:25 【问题描述】：我对如何将导航栏上的文本居中感到有些困惑，因为目前它只会向左移动。我已经尝试过中心对齐，但它仍然继续粘在一边。如果有人能告诉我我犯了什么错误，将不胜感激。
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;
【问题讨论】：
【参考方案1】：您需要从#nav 和li 元素中删除float:left。
然后将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;
【讨论】：
@user2602766 如果回答了您的问题，请将答案标记为已接受，否则请就未解决的问题提供反馈。谢谢【参考方案2】：使用这个 CSS：
取下浮动，使用display:inline-block 将lis 并排放置，并在#nav 上使用text-align:center。这是你要找的吗？
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;
【讨论】：
【参考方案3】：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.
【讨论】：
【参考方案4】：所有好的输入，我认为这也会对某人有所帮助,,, 我通常使用这样的东西， 它是平衡的/居中的/阻挡的，所以一切都是可点击的
<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>
【讨论】：
以上是关于如何在 CSS 中将网站导航栏中的文本居中对齐？的主要内容，如果未能解决你的问题，请参考以下文章