How To Centrally Align A Float: Left Ul/li Navigation Menu With Css?

February 28, 2024 Post a Comment

So I have the following CSS in place to display a horizontal navigation bar using: .navigation ul { list-style: none; padding: 0; margin: 0; } .navigation li { float: left

Solution 1:

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

Solution 2:

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

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

Solution 3:

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

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

Solution 4:

There are few settings like float, margin which may affect this code to work properly. It works in IE7 too. I got this code from an article over at CSS Wizardry.

.navigationul 
{
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: center;/*make this change*/
 }
.navigationli
 {
    float: none;/*make this change*/display:inline;/*make this change*/margin: 01.15em;
 /* margin: 0 auto; */
 }
 .navigationlia {
    display:inline-block;/*make this change*/
 }
 .navigation 
 {
  /*width: auto;*//*margin: 0 auto;*/text-align: center;
 }

Solution 5:

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: 01.15em;
      }
    </style></head><body><ul><li>Option 1</li><li>Option 2</li><li>Option 3</li></ul></body></html>

Html5 Manual