Search code examples
htmlcsswidthparent-childhtml-lists

Center text in ul with floated li's


I have a UL who's LIs are floated right. I would like to center align the text in the UL, but I see that if I don't specify the UL's width, it thinks that it's 100%, and doesn't center align the LIs.
However, I cannot give the UL a specific width because the data in the LIs is dynamic.
Also, because the UL's width is 100%, it doesn't help to wrap the UL in a DIV and give the DIV a rule of text-align:center.
Is there a CSS only way to get the UL to center it's LIs?
A demo page with the said LI is here


Solution

  • I found a very simple solution, that works for me in both FF and in IE:

    CSS:

    #footer{text-align:center;list-style:none}
    #footer li{display:inline}
    

    HTML:

    <ul id=”footer”>
    <li><a href=”1.asp”>Link 1</a></li>
    <li><a href=”2n.asp”>Link 2</a></li>
    <li><a href=”3.asp”>Link 3</a></li>
    </ul>