首頁 > web前端 > css教學 > 為什麼我的 CSS'left”屬性沒有讓我的元素居中?

為什麼我的 CSS'left”屬性沒有讓我的元素居中?

Susan Sarandon
發布: 2024-11-14 09:25:02
原創
416 人瀏覽過

Why Is My CSS

CSS「left」屬性不起作用

在 CSS 中,「left」屬性用於控制元素相對於其包含元素的水平位置。但是,必須確保包含元素具有定義的寬度、高度和位置,以便「left」屬性正常運作。

參考您提供的程式碼範例,您正在嘗試定位子元素div(「inner」)位於父div(「outher」)內,使其左邊緣使用「left: 50%」與父div 的中心對齊。但是,您提供的程式碼未正確對齊子 div。

修正:

要正確定位子 div,您需要指定「static」表示包含的 div(「outer」)。這是因為「靜態」位置是 HTML 中元素的預設值,不允許精確定位。

調整後的程式碼:

#outher {
   width: 1000px;
   height: 1000px;
   background-color: #ccc;
   position: relative; // Add this line
}

#inner {
   width: 400px;
   height: 300px;
   background-color: #090;
   position: absolute; // Add this line
   left: 50%;
}
登入後複製

透過設定將子div 的“position”屬性設為“absolute”,將包含div 的“relative”設定為“relative”,則可以為“left”屬性建立正確的參考點。這可確保子 div 相對於包含的 div 定位,並且其左邊緣按預期與父 div 的中心對齊。

以上是為什麼我的 CSS'left”屬性沒有讓我的元素居中?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

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