首頁 >web前端 >css教學 >為什麼我的 `margin: 0 auto;` 沒有將我的元素集中在 100% 寬度的父級中?

為什麼我的 `margin: 0 auto;` 沒有將我的元素集中在 100% 寬度的父級中?

Susan Sarandon
Susan Sarandon原創
2024-12-05 06:40:16335瀏覽

Why Isn't My `margin: 0 auto;` Centering My Element Within a 100% Width Parent?

為什麼用「margin: 0 auto;」將元素居中在100% 寬度內,父級不起作用

問題描述:

考慮這種情況:您有一個寬度設定為100% 的父級div和一個無序的列出其中。您已應用“margin: 0 auto;”到無序列表以使其居中,但它拒絕讓步。

問題原因:

問題的關鍵在於您已經定義了父 div 的寬度,而不是您嘗試居中的元素的寬度。對於「保證金:0 自動;」為了有效地工作,必須指定居中元素的寬度。

解:

要修正此問題,請為無序列表指定寬度:

#header ul {
    margin: 0 auto;
    width: 90%;
}

額外注意事項:

為了獲得更優雅的外觀,請考慮以下改進:

  • 刪除「float: left; ” “li”元素中的屬性,因為它與“display: inline”衝突,並在IE6和更早版本的瀏覽器中建立意外的邊距加倍。
  • 將下面的樣式屬性直接套用於「li」元素:
#header ul li {
    color: #CCCCCC;
    display: inline;
    font-size: 20px;
    padding-right: 20px;
}

以上是為什麼我的 `margin: 0 auto;` 沒有將我的元素集中在 100% 寬度的父級中?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

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