Question

I have just realized that the answer I accepted for my previous question was not quite correct – or, rather, I did not express the question correctly.

Given the list items

* item 1 is boring
* item 2 is a very long item indeed, oh yes it is
* item 3 is almost as boring as item 1

I would like 1) the left sides (bullets) of the list items to align vertically and 2) have the center character of the longest line be in the cerntre of the page. In this case, that would be approx the space between “item” and “indeed” in item 2.

Bad ascii art follows

---------------------------------------
|         * abc                        |
|         * qwertyuiopabcdef           |
|         * abc                        |
----------------------------------------

and not

---------------------------------------
|                 * abc                |
|                 * qwertyuiopabcdef   |
|                 * abc                |
----------------------------------------

Answer 1

If I understand correctly, this should be perfect for you:

• The whole list will be centered with regard to the longest list item.
• No explicit pixel width needs to be declared – all the “calculation” happens automagically.
• I included the hacks required to make display: inline-block work in IE7.
• I added a “center line” so you can easily see where the center is.

Live Demo

HTML:

<div id="container">
    <ul>
        <li>item 1 is boring</li>
        <li>item 2 is a very long item indeed, oh yes it is</li>
        <li>item 3 is almost as boring as item 1</li>
    </ul>
</div>

Relevant CSS:

#container {
    text-align: center
}
#container ul {
    text-align: left;

    display: inline-block;
    *display: inline;
    zoom: 1
}