導航菜單不會居中

我的導航菜單不會居中。而且我在代碼中找不到錯誤。也許有人可以幫助我？導航菜單不會居中

#nav-header { 
 
    height: 60px; 
 
    width: auto; 
 
    background-color: rgba(255, 255, 255, 0.7); 
 
    margin-top: 80px; 
 
} 
 

 
#nav-header li.nav-link { 
 
    display: inline; 
 
    padding: 20px 20px 20px 20px; 
 
    font-family: 'Source Sans Pro', sans-serif,"Open Sans", "Helvetica",sans-serif; 
 
    font-size: 28pt; 
 
    text-align: inherit; 
 
    margin: 0 auto; 
 

 
    
 
}

<ul id="nav-header"> 
 
    <li class="nav-link"><a href="index.html">Home</a></li> 
 
    <li class="nav-link"><a href="#">Game</a></li> 
 
    <li class="nav-link"><a href="#">Higschore</a></li> 
 
    <li class="nav-link"><a href="#">Contact</a></li> 
 
</ul>

親切的問候，

Jelmer

來源

2015-02-11 jelmerdt

對不起，我抄錯文本對齊。 text-align：center;仍然不起作用。 – jelmerdt 2015-02-11 16:44:33

http://stackoverflow.com/questions/114543/horizontally-center-a-div-in-a-div可能的重複 – 2015-02-11 16:50:06

將text-align:center;添加到父元素。

#nav-header { 
 
    height: 60px; 
 
    width: auto; 
 
    background-color: rgba(255, 255, 255, 0.7); 
 
    margin-top: 80px; 
 
    text-align:center; /* see here */ 
 
} 
 

 
#nav-header li.nav-link { 
 
    display: inline-block; /* preferable to plain inline */ 
 
    padding: 20px 20px 20px 20px; 
 
    font-family: 'Source Sans Pro', sans-serif,"Open Sans", "Helvetica",sans-serif; 
 
    font-size: 28pt; 
 
    text-align: inherit; 
 
    margin: 0 auto; 
 

 
    
 
}

<ul id="nav-header"> 
 
    <li class="nav-link"><a href="index.html">Home</a></li> 
 
    <li class="nav-link"><a href="#">Game</a></li> 
 
    <li class="nav-link"><a href="#">Higschore</a></li> 
 
    <li class="nav-link"><a href="#">Contact</a></li> 
 
</ul>

來源

2015-02-11 16:44:46

首先，在所有你需要的，因爲你正在使用inline爲li要素重置ul的默認padding，然後您可以使用容器上的text-align屬性將內部元素居中：

#nav-header { 
    padding:0; 
    text-align:center; 
}

#nav-header { 
 
    height: 60px; 
 
    width: auto; 
 
    background-color: rgba(255, 255, 255, 0.7); 
 
    margin-top: 80px; 
 
    padding:0; 
 
    text-align:center; 
 
} 
 
#nav-header li.nav-link { 
 
    display: inline; 
 
    padding: 20px 20px 20px 20px; 
 
    font-family: 'Source Sans Pro', sans-serif, "Open Sans", "Helvetica", sans-serif; 
 
    font-size: 28pt; 
 
    text-align: inherit; 
 
    margin: 0 auto; 
 
}

<ul id="nav-header"> 
 
    <li class="nav-link"><a href="index.html">Home</a></li> 
 
    <li class="nav-link"><a href="#">Game</a></li> 
 
    <li class="nav-link"><a href="#">Higschore</a></li> 
 
    <li class="nav-link"><a href="#">Contact</a></li> 
 
</ul>

來源

2015-02-11 16:44:35 DaniP

添加text-align: center到#nav-header：

#nav-header { 
 
    height: 60px; 
 
    width: auto; 
 
    background-color: rgba(255, 255, 255, 0.7); 
 
    margin-top: 80px; 
 
    text-align: center; 
 
} 
 

 
#nav-header li.nav-link { 
 
    display: inline; 
 
    padding: 20px 20px 20px 20px; 
 
    font-family: 'Source Sans Pro', sans-serif,"Open Sans", "Helvetica",sans-serif; 
 
    font-size: 28pt; 
 
    text-align: inherit; 
 
    margin: 0 auto; 
 

 
    
 
}

<ul id="nav-header"> 
 
    <li class="nav-link"><a href="index.html">Home</a></li> 
 
    <li class="nav-link"><a href="#">Game</a></li> 
 
    <li class="nav-link"><a href="#">Higschore</a></li> 
 
    <li class="nav-link"><a href="#">Contact</a></li> 
 
</ul>

來源

2015-02-11 16:44:40

導航菜單不會居中

回答

相關問題