首頁 > web前端 > css教學 > 如何在 Div 內水平居中列表?

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

Mary-Kate Olsen
發布: 2024-12-04 22:04:15
原創
578 人瀏覽過

How to Center a List Horizontally Within a 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中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板