如何將無序列表 (``) 置於 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中文網其他相關文章！