首頁 >web前端 >css教學 >為什麼 `margin: 0 auto` 不將我的元素置中?

為什麼 `margin: 0 auto` 不將我的元素置中?

Patricia Arquette
Patricia Arquette原創
2024-12-08 09:52:10982瀏覽

Why Doesn't `margin: 0 auto` Center My Element?

為什麼Margin: 0 Auto 無法使元素居中

當嘗試使用margin: 0 auto 屬性水平對齊元素時,指定要居中的元素的寬度(而不是父元素的寬度)至關重要。

考慮以下情況:您有一個具有已定義寬度的父容器元素 (#header),並且其中有一個無序列表 (

    )。
      元素應透過應用 margin: 0 auto 在 #header div 內水平居中。但是,如果您不指定
        的寬度,元素,它不會在父容器中居中。

        要解決此問題,請在

          中新增寬度屬性。元素,例如:
#header ul {
  margin: 0 auto;
  width: 90%;
}

這會將 90% 的寬度分配給

    元素。元素,使其在 #header div 中居中。

    更新了CSS 以改進佈局(編輯):

#header ul {
  list-style: none;
  margin: 0 auto;
  width: 90%;
}

#header ul li {
  color: #CCCCCC;
  display: inline;
  font-size: 20px;
  padding-right: 20px;
}

這些修改後的樣式確保

    元素居中並且其列表項目內聯顯示,消除了使用float: left; 引起的任何問題。在
      內並避免舊版 Internet Explorer 中水平邊距加倍。

以上是為什麼 `margin: 0 auto` 不將我的元素置中?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn