How to align navbar to center with css

问题

I need help to align my navbar bar to center Here is my code What's wrong with it? It does not align the menu to the center.

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

One way would be to set the display of #nav ul to inline-block. Then add text-align: center to the parent element in order to center the child 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;
}

Alternatively, you could also set the display of the parent element, #nav to flex, and then add justify-content: center to center the child element horizontally.

Example Here

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

回答2:

Not a big deal here.

Just add text-align:center to ul and make 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;
}

Check in Fiddle

回答3:

Update your css of ul as

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

check fiddle:

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;     
    }

Use this CSS you will got solution. Add in Li relative position, if you require drop down for some categories

回答5:

You can set your ul to display: inline-block; and set text-align: center; to the parent nav:

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


来源：https://stackoverflow.com/questions/28630433/how-to-align-navbar-to-center-with-css

标签

html

css

nav