導航algin：中心

Question

我在這裏有一個小例子來學習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的工作方式...

任何人都知道解決方案？

Answer 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/