如何将导航栏与css对齐

Posted

技术标签:

【中文标题】如何将导航栏与css对齐【英文标题】：How to align navbar to center with 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>

【问题讨论】：

【参考方案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;

【讨论】：

以上是关于如何将导航栏与css对齐的主要内容，如果未能解决你的问题，请参考以下文章

如何在 CSS 中将网站导航栏中的文本居中对齐？

如何匹配导航栏与状态栏ios7

（引导 3）如何让小屏幕上的导航栏与大屏幕上的导航栏一样

在 iOS 7 中让导航栏与状态栏重叠

让导航栏与iOS 7中的状态栏重叠

iOS11中如何设置导航栏与ViewController内容重叠