ansaurus

Question

How to centrally align a float: left ul/li navigation menu with css?

Answer 1

+4 A:

Give your .navigation ul a width and use margin:0 auto;

.navigation ul 
{
  list-style: none;
  padding: 0;
  width: 400px;
  margin: 0 auto;
}

Emily 2009-06-28 15:55:52

Answer 2

A:

You could set the <li>'s to be display: inline, then set text-align: center on the <ul>. Doing that, you can remove the float: left from the list items and you don't need to have a fixed width for the navigation bar as you would if you used margin: 0 auto.

<html>
  <head>
    <style>
      ul { 
        list-style: none;
        text-align: center;
      }

      li {
        display: inline;
        margin: 0 1.15em;
      }
    </style>
  </head>

  <body>
    <ul>
      <li>Option 1</li>
      <li>Option 2</li>
      <li>Option 3</li>
    </ul>
  </body>
</html>

John Kugelman 2009-06-28 15:59:05

Answer 3

+2 A:

Well, to use margin:0 auto on something, it must have a defined width. Probably the best workaround is:

ul li {
  display: inline;
  list-style-type: none;
}
ul {
  text-align:center;
}

Fat Lotus 2009-06-28 16:00:16

Answer 4

+1 A:

Here's a solution that doesn't require specifying the width of your ul.

Ben Marini 2009-12-09 17:12:36

ansaurus

tags:

views:

answers:

How to centrally align a float: left ul/li navigation menu with css?

related questions