如何将无序列表 (``) 置于 Div 内居中？

如何将 ul 水平对齐到 div 中心？

当使用 CSS 将无序列表 (

) 置于 div 中时，有几种方法应对这一挑战的解决方案。以下是所提供的 CSS 的详细信息以及实现所需结果的建议方法：

给定的 CSS：

.container { 
    clear: both; 
    width: 800px; 
    height: 70px; 
    margin-bottom: 10px;
    text-align: center;
}

.container ul { 
    padding-left: 20px; 
    margin: 0; 
    list-style: none;
}

.container ul li { 
    margin: 0; 
    padding: 0; 
}

具有属性 text-align: center;应用于 .container，看来您的目标是将容器内的所有内容（包括 ul）居中。但是，此属性仅对齐元素的文本内容，而不是元素本身。

以下是一些在 div 中水平居中 ul 的方法：

解决方案 1：使用margin's auto:

该方法涉及设置 margin: 0 auto;在 ul 上，允许其对称应用边距，有效地将其放置在中心：

.container ul {
    margin: 0 auto;
}

解决方案 2：利用 display: table;:

This解决方案利用了显示属性的表格渲染模式。通过设置显示：表格；在 ul 上，您将其转换为表容器。然后，margin: 0 auto;将以与解决方案 1 相同的方式将 ul 在 div 中居中：

.container ul {
    display: table;
    margin: 0 auto;
}

解决方案 3：实现 text-align: center;和 inline-block:

此方法利用了 display: inline-block; ul 上的财产。与text-align结合使用时：居中；在父容器上，它将 ul 作为文本流中的内联元素放置在中心：

.container { 
    text-align: center;
}

.container ul { 
    display: inline-block;
}

以上是如何将无序列表 (``) 置于 Div 内居中？的详细内容。更多信息请关注PHP中文网其他相关文章！