左对齐 <ul> 在 Wrapper <div> 中居中答案

【问题标题】：Left-Aligned <ul> Centered within Wrapper <div>左对齐 <ul> 在 Wrapper <div> 中居中
【发布时间】：2012-12-08 13:28:15
【问题描述】：

以下 ul 是左对齐的，我试图将其置于 #category_list div 的中心，但似乎无法正确处理。

我认为问题在于 ul 没有环绕其内容而是扩展为全宽。

我在这里错过了什么？

感谢您的帮助。

<html>
<head>
    <style>


    #category_list {
        padding: 1em 0 2em;
        text-align:center;
        border: 1px solid red;
    }

    #category_list ul{
        padding: 0;
        display:inline-block;
        text-align: left;
        border: 1px solid red;
        margin: 0 auto;
    }

    #category_list li{
        display:inline-block;
        width: 13.75em;
        padding: 1em 0;
        margin: 0 .5em 1em;
        border-bottom: 1px solid #aaaaaa;
    }

    #category_list h2{
        text-align: left;
        margin: 0;
        font: 1em "Georgia", Serif;
        font-style: italic;
    }
    </style>
</head>


<body>
    <div id="category_list">
        <ul>
        <li><h2>Title</h2><img src="_images/categories/img.jpg"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p></li>
        <li><h2>Title</h2><img src="_images/categories/img.jpg"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p></li>
        <li><h2>Title</h2><img src="_images/categories/img.jpg"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p></li>
        <li><h2>Title</h2><img src="_images/categories/img.jpg"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p></li>
        <li><h2>Title</h2><img src="_images/categories/img.jpg"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p></li>
        <li><h2>Title</h2><img src="_images/categories/img.jpg"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p></li>
        </ul>
    </div>
</body>
</html>

【问题讨论】：

标签： html css html-lists text-align

【解决方案1】：

除非您指定宽度，否则 ul 将扩展到其容器的宽度：

#category_list ul {
  width: 80%;
  margin: 0 auto;
}

【讨论】：

谢谢。我决定通过编辑 li 宽度而不是 ul 宽度更容易获得所需的效果。

【解决方案2】：

尝试this (jsFiddle) 编辑：（最接近的版本：here）：

#category_list ul{
    padding: 0;
    display:inline-block;
    border: 1px solid red;
    margin: 0 auto;
}

#category_list li{
    display:inline-block;
    width: 13.75em;
    text-align: left;
    padding: 1em 0;
    margin: 0 .5em 1em;
    border-bottom: 1px solid #aaaaaa;
}

基本上 text-align: left 是从 ul -> li 移出的。

【讨论】：

不，这会使所有 li 的中心对齐 - 假设您调整窗口大小，以便顶部有 4 个 li，第二行有 2 个。我希望第二行的 2 向左对齐而不是中心。
好的，第一行居中，第二行在左边，对吗？
不，所有的 li 都是左对齐的。并且 ul 应该在 #category_list div 中居中。
因此，如果您想象围绕所有 li 元素 (ul) 创建框 - 那就是 li 元素组的确切宽度和高度。我希望该框在其父元素 (#category_list) 的宽度内居中。
为你添加了上面的图片。

【解决方案3】：

好吧，所以实现我所追求的效果的最佳方法是使用百分比和媒体查询修改 li 宽度，而不是试图让 ul 宽度正常工作。

所以是这样的：

#category_list {
    padding: 1em 0 2em;
    text-align:center;
}

#category_list ul{
    padding: 0;
    text-align: left;
    margin: 0 auto;
    width: 100%;
    list-style: none;
    overflow: hidden;
}

#category_list li{
    float: left;
    width: 23%;
    padding: 1em 0;
    margin: 0 1% 1em;
    border-bottom: 1px solid #aaaaaa;
}
@media screen and (max-width: 48em) {
    #category_list li{width:33%;}
}
@media screen and (max-width: 36em) {
    #category_list li{width:48%;}
}

【讨论】：