如何在 Div 內水平居中列表？

如何將清單在 Div 中居中

通常希望將物品清單在固定寬度的 div 中居中。這可以透過 HTML 和 CSS 技術的組合來實現。

解：

為了讓清單及其子元素居中，我們採用以下步驟：

1. 用text-align: center ; 將清單包裹在div 中。
2. 設定顯示：內聯區塊；在清單上將其置於 div 中心。
3. 在清單及其元素上設定適當的邊距和填充以實現所需的效果

代碼：

<div class="wrapper">
    <ul>
        <li>List Item 1</li>
        <li>List Item 2</li>
        <li>List Item 3</li>
    </ul>
</div>

.wrapper {
    text-align: center;
}

.wrapper ul {
    display: inline-block;
    margin: 0;
    padding: 0;
}

.wrapper li {
    float: left;
    padding: 2px 5px;
    border: 1px solid black;
}

說明：

• 包裝器div使列表水平居中。
• 清單上的內聯區塊顯示也會將其水平放置在 div 內。
• 清單和清單項目上的邊距和填滿可調整元素的間距和外觀。

透過執行以下步驟，您可以有效地將清單置於 div 中居中，確保佈局平衡且具有視覺吸引力。

以上是如何在 Div 內水平居中列表？的詳細內容。更多資訊請關注PHP中文網其他相關文章！