Center a horizontal CSS menu

Question

I have a CSS menu using the following CSS.

What is the best way to center the whole menu on the page?

I have tried using another

out

相关标签:

Answer 1

Instead of floating the li, you can display them as inline-blocks.

Then, they will be centered relatively to the ul because of text-align: center.

Since the ul is as wide as the nav by default, the li will look like centered relatively to the nav.

nav {
  text-align: center;
  border: 1px solid black;
}
nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
nav > ul > li {
  display: inline-block;
}
nav a {
  display: block; 
  padding: 10px 15px;
  color: #000000;
  text-decoration: none;
}
nav li:hover > ul {
  display: block;
}
nav > ul ul {
  display: none;
  position: absolute;
}
nav > ul ul > li {
  border-bottom: 1px solid #000000;
}
nav > ul ul a:hover {
  color: #666666;
}

<nav>
  <ul>
    <li><a href="/add_contact.php">Add Contact</a></li>
    <li><a href="/view_contact.php">View Contact</a></li>
    <li><a href="/tickets.php">Tickets</a>
      <ul>
        <li><a>TEST1</a></li>
        <li><a>TEST2</a></li>
      </ul>
    </li>
    <li><a href="/invoices.php">Invoices</a></li>
    <li><a href="/itemised_calls.php">Itemised Calls</a></li>
  </ul>
</nav>

Answer 2

First, when you float the ul's you have to clear the float by adding clear div:

HTML :

<div class="clear"></div>

CSS :

.clear{
    clear:both;
}

---

And for centring the menu you should specify a width of the ul as in example and randomly I have set the width to 560px :

nav ul {
    list-style: none;
    width : 560px;
    margin: 0 auto;
}

---

Take a Look:

http://jsfiddle.net/njuVm/6/

Answer 3

You can center the navigation bar by using the following CSS rules:

nav {
    margin: 0 auto; 
    text-align: center;
    border:1px solid black;
}

nav ul ul {
    display: none;
}

nav ul li:hover > ul {
    display: block;
}

nav ul {
    list-style: none;
    margin: 0;                 /* << add this */
    padding: 0;                /* << add this */
    display: inline-block;     /* << add this */
    vertical-align: top;       /* << add this */
}

nav ul li {
    float: left;
    margin: 0;          /* << add this */
    padding: 0;         /* << add this */
}

nav ul li:hover a {
    color: #000000;
}

nav ul li a {
    display: block; 
    padding: 10px 15px;
    color: #000000;
    text-decoration: none;
    background-color: pink; /* optional... */
}       

nav ul ul {
    border-radius: 0px;
    padding: 0;
    position: absolute;
}

nav ul ul li {
    float: none; 
    border-top: 1px solid #000000;
    border-bottom: 1px solid #000000;
    position: relative;
}

nav ul ul li a {
    color: #000000;
}

nav ul ul li a:hover {
    color: #666666;
}

nav ul ul ul {
    position: absolute;
    top:0;
}

See demo at: http://jsfiddle.net/audetwebdesign/DP6Ax/

The key is to set display: inline-block for nav ul, which will allow your text-align: center rule to take effect.

Make sure to zero out margins and paddings on the ul and li elements. Everything else that you did was more or less right, so you should be good.