如何将导航栏与 css 居中对齐

Question

我需要帮助将我的导航栏居中对齐这是我的代码它有什么问题？它没有将菜单居中对齐。

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

Answer 1

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

Answer 2

一种方法是将 #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;
}

Answer 3

您可以将您的 ul 设置为显示：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;
}

Answer 4

更新你的 css 的 ul 作为

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

检查fiddle:

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

Answer 5

这里没什么大不了的。

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

Answer 6

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

<div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre><code>    <!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>

Answer 7

#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 您将获得解决方案。加入李相对位置，如果你需要下拉某些类别

如何将导航栏与 css 居中对齐

How to align navbar to center with css

html

css

nav