Menu
I have an unordered list that wraps onto a second line, and needs to be centered horizontally within the containing UL. Each LI is a set width and height. I've seen many approaches that work for a single line, but nothing I've tried is working when the list wraps to a second line. Would be ideal if this worked in IE7+ -- Thanks for the help.
See here for an illustration:
http://grab.by/8UIl
479
If you want to make this navigational unordered list horizontal, you have basically two options: Make the list items inline instead of the default block. .li { display: inline; } This will not force breaks after the list items and they will line up horizontally as far as they are able.
To center align an unordered list, you need to use the CSS text align property. In addition to this, you also need to put the unordered list inside the div element. Now, add the style to the div class and use the text-align property with center as its value.
To horizontally center a block element (like <div>), use margin: auto; Setting the width of the element will prevent it from stretching out to the edges of its container.
Here is the best method I could find.
ul li { /* make list elements fall inline as block elements */ position: relative; display: inline-block; /* next two lines only for display purposes */ text-align: center; border:1px solid red; } /* horizontally center ul element */ ul { text-align:center; } See the link for an example: http://jsfiddle.net/gfkPG/
112
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
