How to horizontally align a ul element to center

Question

I\'m not able to align a menu, contained within a ul, to the horizontal center of its container. how to do that?

See a live demo of the menu on jsFiddle.

Answer 1

You can address the ul element as an inline-level element within the page flow, while retaining its block-level characteristics (using the inline-block display value) — after applying this, it can be simply aligned within its container like any inline-level element, using text-align.

To implement this, add the following rules:

#container {
    text-align: center;
}
ul {
    display: inline-block;
}

Here's the updated demo.

Reference

• display on Mozilla Developer Network

---

Disclaimer: Support for inline-block is somewhat limited, see the compatibility table on caniuse.com.