Question

导航栏的代码来自over here。

但是，它与左侧而不是中心对齐。我怎么能这样做？

HTML

<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

CSS

ul {
   list-style-type: none;
   margin: 0;
   padding: 0;
   overflow: hidden;
   text-align:center;
   font-family:arial;
}

li {
   float: left;
}

   a:link, a:visited {
   display: block;
   width: 120px;
   font-weight: bold;
   color: #FFFFFF;
   background-color:black;
   text-align: center;
   padding: 6px;
   font-family:arial;
   text-decoration: none;
} 

   a:hover, a:active {
   background-color:grey;
}

Answer 1

text-align不会影响浮动元素。但是它会影响内联元素。

变化：

li {
   float: left;
}

要：

li {
    display: inline-block;
}

JSFiddle demo

谢谢，但按钮之间有白色间隙，我该如何关闭它们？

要修复白色间隙，您需要为ul设置一个字体大小为0，并且您的字体大小为您希望列表项具有的字体大小。

ul {
    font-size: 0;
}

li {
    display: inline-block;
    font-size: 16px;
}

JSFiddle demo

Answer 2

如果您不想指定宽度，则可以使用margin: 0 auto和display: table。

注意： w3schools不是最好的资源;我会在the MDN推荐CSS Tricks，w3.org和官方文档。使用Google搜索HTML / CSS资源时，请使用search term -w3schools来避免w3schools的结果。

Have an example!

CSS

ul {
   display: table;
   margin: 0 auto;
}

或者您也可以使用：

CSS

ul {
    width: 500px; /* whatever width size */
    margin: 0 auto;
}

如果您需要支持IE 6/7，此选项会很好。

值得注意的是，根据您想要实现的目标，您应该将<body>本身或包含您想要居中的所有内容的其他元素居中。在这个非常基本的示例中，我使用<div class="wrap">来集中我的内容。

Another example!

HTML

<div class="wrap">
  <ul>
    <li>
      <a href="#home">Home</a>
    </li>
    <li>
      <a href="#news">News</a>
    </li>
    <li>
      <a href="#contact">Contact</a>
    </li>
    <li>
      <a href="#about">About</a>
    </li>
  </ul>
  <div class="content">
    This is more content
  </div>
</div>

CSS

.wrap {
    display: table;
    margin: 0 auto;
}
.content {
    padding: 20px;
}
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;

}

li {
    float: left;
}

a:link, a:visited {
    display: block;
    width: 120px;
    font-weight: bold;
    color: #FFFFFF;
    background-color: #98bf21;
    text-align: center;
    padding: 4px;
    text-decoration: none;
    text-transform: uppercase;
}

a:hover, a:active {
    background-color: #7A991A;
}

Answer 3

只需为 ul 类添加 display：table 和 margin：auto ，如下所示：

ul {
 display: table;
 margin: 0 auto;
 list-style-type: none;
 padding: 0;
 overflow: hidden;
 text-align:center;
 font-family:arial;
}

就是这样，您的导航栏将定位到中心位置。

如何让导航栏与中心对齐

3 个答案: