How to horizontally align ul to the center of the div?

Question

I am trying to center the <ul> inside a <div> . I tried the following

 text-align: center; 

and

 left: 50%; 

This does not work.

CSS

 .container { clear: both; width: 800px; height: 70px; margin-bottom: 10px; text-align: center; } .container ul { padding: 0 0 0 20px; margin: 0; list-style: none; } .container ul li { margin: 0; padding: 0; } 

I want ul be centered inside the container.

Answer 1

IE7 +: max-width: 660px and margin: auto

You can center the block level element by setting a fixed width, and set margin-right and -left to auto.

 .container ul { /* for IE below version 7 use `width` instead of `max-width` */ max-width: 660px; margin-right: auto; margin-left: auto; } 

Notes

• No container required
• It requires the width or maximum width of the element to the center, which should be known 👎

---

IE8 +: display: inline-block and text-align: center

It is also possible to center the element, as well as plain text. Disadvantage: you need to assign values ​​to both the container and the element itself.

 .container { text-align: center; } .container ul { display: inline-block; /* One most likely needs to realign flow content */ text-align: initial; } 

Notes:

• No specific width required 👍
• Container Required 👎
• Aligns the contents of the stream to the center (potentially unwanted side effect) 👎
• Works well with a dynamic number of menu items (i.e., in those cases where you do not know the width that one item occupies) 👍

---

IE8 +: display: table and margin: auto

Like the first solution, you use automatic values ​​for the fields on the right and left, but do not assign a width. If you don't need support for IE7 and below, this is better, although for the table type for display it seems awkward to use the value of the display property.

 .container ul { display: table; margin-right: auto; margin-left: auto; } 

---

IE9 +: transform: translatex(-50%) and left: 50%

This is similar to a fancy centering method that uses absolute positioning and negative margins.

 .container { position: relative; } .container ul { position: absolute; left: 50%; transform: translatex(-50%); } 

Notes

• As always, when using absolute positioning, the centered element will be removed from the document stream. All elements will only care about the container, but ignore the centered element itself. 👎👎👎
• Container Required 👎
• This method makes it easy to center vertically using top instead of left and translateY() instead of translateX() . top and left also combined with translate() (note the missing X and Y ) 👍
• Check caniuse.com for browser support, because it may require a prefix for Android browsers and / or iOS browsers (and IE9).

---

Cutting edge: display: flex

 .container { display: flex; justify-content: center; } 

Notes

• This is not a hack 👍👍👍
• Container Required 👎
• Browser support is not bad, but it has several notable holes, especially Internet Explorer up to version 11 and some older Android and Safari (macOS and iOS)

---

Lastly, a demo that summarizes all of the above solutions.

Answer 2

Make the left and right margins of your UL submachine gun and assign it the width:

 #headermenu ul { margin: 0 auto; width: 620px; } 

Edit:. As kleinfreund suggested, you can also center the alignment of the container and display ul on the inline unit, but you also need to provide the LI with either a left float or an inline display.

 #headermenu { text-align: center; } #headermenu ul { display: inline-block; } #headermenu ul li { float: left; /* or display: inline; */ } 

Answer 3

 ul { width: 90%; list-style-type:none; margin:auto; padding:0; position:relative; left:5%; } 

Answer 4

You can verify this by solving your problem ...

  #headermenu ul{ text-align: center; } #headermenu li { list-style-type: none; display: inline-block; } #headermenu ul li a{ float: left; } 

http://jsfiddle.net/thirtydot/VCZgW/

Answer 5

You can quickly and easily center ul using CSS Flexbox .

 #headermenu { display: flex; justify-content: center; /* center ul horizontally */ align-items: center; /* center ul vertically (if necessary) */ width: 800px; height: 70px; margin-bottom: 10px; }