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

January 28, 2023 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;

.navigation ul 
{
  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:

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

Baca Juga

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.

.navigation ul 
{
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: center;/*make this change*/
 }
.navigation li
 {
    float: none;/*make this change*/
    display:inline;/*make this change*/
    margin: 0 1.15em;
 /* margin: 0 auto; */
 }
 .navigation li a {
    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: 0 1.15em;
      }
    </style>
  </head>

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

Html5 Dictionary