Как мне центрировать список, как показано здесь?

Question

Я только что понял, что ответ, который я принял за мой предыдущий вопрос , был не совсем правильным - или, скорее, я не правильно сформулировал вопрос.

С учетом пунктов списка

* 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

Мне бы хотелось, чтобы 1) левые стороны (маркеры) элементов списка были выровнены по вертикали, и 2) центральный символ самой длинной строки находился в центре страницы. В этом случае это будет приблизительно промежуток между «элементом» и «действительно» в пункте 2.

Художественная аська следует

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

а не

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

Answer 1

Если я правильно понимаю, это должно быть идеально для вас:

• Весь список будет центрирован относительно самого длинного элемента списка.
• Не нужно указывать явную ширину пикселя - все «вычисления» происходят автоматически.
• Я включил хаки, необходимые для работы display: inline-block в IE7.
• Я добавил «центральную линию», чтобы вы могли легко видеть, где находится центр.

Демонстрация в реальном времени

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>

Соответствующий CSS:

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

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

Answer 2

Я ответил на аналогичный вопрос на Центрирование маркеров в центрированном списке

Проверьте рабочий пример на http://jsfiddle.net/8mHeh/2/