Question

我刚刚意识到我接受my previous 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项中“项目”和“确实”之间的空间。

坏ascii艺术如下

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

而不是

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

Answer 1

如果我理解正确，这对你来说应该是完美的：

整个列表将以最长的列表项为中心。
不需要声明显式像素宽度 - 所有“计算”都会自动发生。
我包含了让display: inline-block在IE7中工作所需的黑客攻击。
我添加了一条“中心线”，这样您就可以轻松查看中心位置。

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>

相关CSS：

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

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

Answer 2

我在Centering Bullets On A Centered List

回答了类似的问题

检查http://jsfiddle.net/8mHeh/2/

处的工作示例

如何将列表居中显示在此处？

2 个答案:

检查http://jsfiddle.net/8mHeh/2/