5

I am a bit stumped as to how I can center the text on the navigation bar as at the moment it is only going to the left. I have already tried center align but it still continues to stick to the side. If anyone could tell me what error I am making this would be greatly appreciated.

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;
}
4

4 回答 4

7

你需要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-27T17:35:35.147 回答
1

使用这个 CSS：

取下浮动，用于display:inline-block将lis 并排放置，然后在#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-27T17:38:11.360 回答
0

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-27T17:40:47.157 回答
0

所有好的输入，我认为这对某人也有
帮助

<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-18T18:59:59.307 回答