导航菜单不会居中答案

【问题标题】：Nav menu will not center导航菜单不会居中
【发布时间】：2015-04-12 03:21:33
【问题描述】：

我的导航菜单不会居中。而且我在代码中找不到错误。也许有人可以帮助我？！

#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>

亲切的问候，

杰尔默

【问题讨论】：

抱歉，我复制了错误的文本对齐方式。文本对齐：居中；还是不行。
stackoverflow.com/questions/114543/…的可能重复

标签： css menu alignment center

【解决方案1】：

将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>

【讨论】：

【解决方案2】：

将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>

【讨论】：

【解决方案3】：

首先，您需要重置ul 的默认padding，然后由于您将inline 用于li 元素，您可以使用容器上的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>

【讨论】：