使用 align:center 导航答案

【问题标题】：Navigation with algin:center使用 align:center 导航
【发布时间】：2014-03-04 05:24:14
【问题描述】：

我这里有一个小例子来学习 HTML。

这是 HTML 部分：

    <!-- header open -->
 <header role="banner">
 <h1>Beispielaufgaben zu HTML5<br>und CSS3</h1>
  <nav class="clearfix">
    <ul>
      <li><a href="home.html">HOME</a></li>
      <li><a href="html.html">HTML</a></li>
      <li><a href="css.html">CSS</a></li>
    </ul>
  </nav>
 </header>
<!-- header close -->

这是 CSS 部分：

html {
    margin:0;
    pading:0;
}
.wrapper {
    width:90%;
    max-width:1500px;
    margin-top:2%;
    margin-left:auto;
    margin-right:auto;
    }
header h1 {
    font-size:350%;
    text-align:center;
    background-color:#999;
    }
nav ul li {
    background-color:#CCC;
    display:block;
    float:left;
    width:20%;
    font-size:200%;
    text-align:center;
    }
}

我希望导航像 h1 一样居中，但我不会使用一堆 testet 方式...

有人知道解决办法吗？

【问题讨论】：

标签： html-lists center nav

【解决方案1】：

我对 CSS 做了一些更改，它现在应该可以满足您的需求了：

html {
    margin:0;
    pading:0;
}
.wrapper {
    width:90%;
    max-width:1500px;
    margin-top:2%;
    margin-left:auto;
    margin-right:auto;
    }
header h1 {
    font-size:350%;
    text-align:center;
    background-color:#999;
    }
nav ul li {
    background-color:#CCC;
    display:block; /*Changed to display: inline-block to replace float*/
    float:left; /*Removed because would interfere with added text-align on nav*/
    width:20%;
    font-size:200%;
    text-align:center; /*Removed because not needed*/
    }
} /*Removed random closing curly bracket*/
nav {
    text-align: center; /*Added to align all <li> in center*/
}

小提琴：http://jsfiddle.net/U6Khy/1/

【讨论】：