How I can center a menu bar with ul

Question

I have a simple menu bar inside a div and I can center the div but I want to center the menu bar inside the div.

This is the code:

CSS:

Answer 1

First of all, please note that you should put the elements inside the tag.

Actually, The ul element is aligned at the center (See demo here). But the point is that the list items are floated to the left.

There are tow options:

1. Using a proper fixed width (or max-width as you did) for the

   element. Working Demo

   • Or use display: inline-block instead of float: left for the list items, and use text-align: center for the ul to align the inline elements horizontally. Working Demo.

But note that there is a white space between inline(-block) elements, which absolutely the normal behavior of inline elements in inline flow. You can refer my answer here to fix that.