如何将导航栏与css对齐答案

【问题标题】：How to align navbar to center with css如何将导航栏与css对齐
【发布时间】：2015-04-22 05:13:36
【问题描述】：

我需要帮助将我的导航栏对齐到中心这是我的代码有什么问题？它不会将菜单与中心对齐。

#nav {
  position: absolute;
  left: 0px;
  height: 40px;
  background-color: #2C64B4;
  width: 100%;
  margin: 0 auto;
}
#nav ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
#nav ul li {
  margin: 0;
  padding: 0;
  float: left;
}
#nav ul li a {
  text-decoration: none;
  padding: 10px 20px;
  display: block;
  color: #FFF;
  text-align: center;
}

<div id="nav">
  <ul>
    <li><a href="#">Home</a>
    </li>
    <li><a href="#">About Us</a>
    </li>
    <li><a href="#">Blah</a>
    </li>
    <li><a href="#">exampl</a>
    </li>
  </ul>
</div>

【问题讨论】：

标签： html css nav

【解决方案1】：

一种方法是将#nav ul 的display 设置为inline-block。然后将text-align: center添加到父元素中，以使子元素ul居中：

Example Here

#nav {
    position: absolute;
    left: 0px;
    height: 40px;
    background-color: #2C64B4;
    width: 100%;
    text-align: center;
}
#nav ul {
    margin: 0;
    padding: 0;
    display: inline-block;
}

或者，您也可以将父元素的display #nav 设置为flex，然后添加justify-content: center 使子元素水平居中。

Example Here

#nav {
    position: absolute;
    left: 0px;
    height: 40px;
    background-color: #2C64B4;
    width: 100%;
    display: flex;
    justify-content: center;
}

【讨论】：

【解决方案2】：

这里没什么大不了的。

只需将text-align:center 添加到ul 并生成li display:inline-block

HTML

<div id="nav">
    <ul>
        <li><a href="#">Home</a>
        </li>
        <li><a href="#">About Us</a>
        </li>
        <li><a href="#">Blah</a>
        </li>
        <li><a href="#">exampl</a>
        </li>
    </ul>
</div>

CSS

#nav {
    position: absolute;
    left: 0px;
    height: 40px;
    background-color: #2C64B4;
    width: 100%;
    margin: 0 auto;
}
#nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: center;
}
#nav ul li {
    margin: 0;
    padding: 0;
    display: inline-block;
}
#nav ul li a {
    text-decoration: none;
    padding: 10px 20px;
    display: block;
    color: #FFF;
    text-align: center;
}

签到Fiddle

【讨论】：

【解决方案3】：

更新你的 ul 的 css 作为

#nav ul {
    margin: auto;
     padding: 0;
     overflow: hidden;
     width: 60%;
}

检查小提琴：

http://jsfiddle.net/swapnilmotewar/7kk8knd0/2/

【讨论】：

【解决方案4】：

#nav {
    height: 40px;
    background-color: #2C64B4;
    width: 100%;
    margin: 0 auto;
    }   
#nav ul {
    margin: 0;
    padding: 0;
    text-align:center;
}
#nav ul li {
    margin: 0;
    padding: 0;
    display:inline-block;
    position: relative;
}
#nav ul li a {
    text-decoration: none;
    padding: 10px 20px;
    display: block;
    color: #FFF;
    text-align: center;     
    }

使用这个 CSS 你会得到解决方案。如果需要某些类别的下拉列表，请添加 Li 相对位置

【讨论】：

【解决方案5】：

你可以将你的 ul 设置为 display: inline-block;并设置 text-align: center;到父导航：

#nav {
    position: absolute;
    left: 0px;
    height: 40px;
    background-color: #2C64B4;
    width: 100%;
    text-align:center;
}   
#nav ul {
    margin: 0;
    padding: 0;
    display: inline-block;
}

【讨论】：

【解决方案6】：

#nav ul {
    margin: auto;
    padding: 0;
}

【讨论】：

【解决方案7】：

#nav {
    position: absolute;
    left: 0px;
    height: 40px;
    background-color: #2C64B4;
    width: 100%;
    margin: 0 auto;
    text-align:center;
}   
#nav ul {
   margin: auto;
     padding: 0;



    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style>
    #nav {
        position: absolute;
        left: 0px;
        height: 40px;
        background-color: #2C64B4;
        width: 100%;
        margin: 0 auto;
    	text-align:center;
    }   
    #nav ul {
       margin: auto;
         padding: 0;
         overflow: hidden;
    	 display: inline-block;
    }
    #nav ul li {
        margin: 0;
        padding: 0;
        float:left;
    }
    #nav ul li a {
        text-decoration: none;
        padding: 10px 20px;
        display: block;
        color: #FFF;
        text-align: center;     
        }
    	</style>
    </head>

    <body>

    <div id="nav">
    <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About Us</a></li>
    <li><a href="#">Blah</a></li>
    <li><a href="#">exampl</a></li>
    </ul>
    </div>
    </body>
    </html>




     overflow: hidden;
     display: inline-block;
}

【讨论】：