水平居中两个不相关的 UL答案

【问题标题】：center two unrelated ULs horizontally水平居中两个不相关的 UL
【发布时间】：2014-03-09 09:22:35
【问题描述】：

是否可以将两个不相关的 UL 水平并排居中？

我有这个代码：

<div id="container">
    <ul id="list1">
        <li></li>
        <li></li>
        ...
        <li></li>
    </ul>
    <ul id="list2">
        <li></li>
        <li></li>
        ...
        <li></li>
    </ul>
</div>

我尝试了“左：50%”然后“右：50%”的 CSS 技巧，但没有成功。

#container { position: relative; left: 50%; }
#container ul { float: left; position: relative; right: 50%; }

有什么想法吗？

【问题讨论】：

标签： html css html-lists centering

【解决方案1】：

大概是这样的吧？ text-align: center; + display: inline-block;:

#container {
    ...
    text-align: center;
}

#list1, #list2 {
    ...
    display: inline-block;
}

演示：http://jsfiddle.net/N6RUM/

【讨论】：

【解决方案2】：

还是喜欢这个？ Fiddle

#container { 
    position: relative; 
    left: 50%;
}
#container ul { 
    float: left; 
}

【讨论】：

【解决方案3】：

您可以使用table 和table-cell：

Fiddle

#list1 { position: relative;  width: 50%;  display: table-cell; background-color: green;}
#list2 { position: relative;  width: 50%;  display: table-cell; background-color: red;}
#container{
    display: table;
    width: 100%;
    text-align: center;
}

li{
    list-style-type: none;
}

【讨论】：