Menu
I need to center an unordered list of unknown width, while still keeping the list-items left aligned.
Achieve the same result as this:
HTML
<div> <ul> <li></li> <li></li> <li></li> </ul> </div> CSS
div { text-align: center; } ul { display: inline-block; text-align: left; } Except my <ul> doesn't have a parent div. ul { margin: 0 auto; } doesn't work because I don't have a fixed width. ul { text-align: center; } doesn't work because the list-items won't be left aligned anymore. So how can I center this <ul> while keeping the <li>s left aligned (without having a parent div wrapper)?
<ul> <li></li> <li></li> <li></li> </ul> EDIT: Perhaps my wording wasn't the best... The first block of code already works... what i need is to do it without the <div> wrapper, if that's possible of course. Float tricks? Pseudo element tricks? There must be a way.
725
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 make a right-aligned version of the list, only three changes need to occur. First, set the "UL" "text-align" to "right". Second, change the left "background-position" from "0" to "100%" - which makes the image align up with the right edge. And finally change "padding-left" to "padding-right".
All that needs to be done is to set your <ul> or <ol> as position: relative; so it holds down the fort, display: block; so it takes up the space, and then give it a text-align: center; Next, tell your <li> to have a width: auto; and to, and this is the magic, display: inline; Works every time, palm to forehead.
ul { display: table; margin: 0 auto; }<html> <body> <ul> <li>56456456</li> <li>4564564564564649999999999999999999999999999996</li> <li>45645</li> </ul> </body> </html>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
