Mengapakah Harta CSS Saya 'ditinggalkan' Tidak Memusatkan Elemen Saya?

Patricia Arquette
Lepaskan: 2024-11-11 20:19:03
asal
278 orang telah melayarinya

Why is My CSS

Sifat "kiri" CSS Tidak Berfungsi

Apabila cuba menjajarkan elemen ke tengah elemen induk menggunakan sifat "kiri" , anda mungkin menghadapi ralat jika elemen tidak diletakkan dengan betul.

Pertimbangkan senario dengan dua div, satu bersarang dalam satu lagi. Untuk memusatkan sempadan kiri div dalam dalam div induk, anda biasanya akan menggunakan CSS berikut:

#inner {
   width: 400px;
   height: 300px;
   background-color: #090;
   left: 50%;
}
Salin selepas log masuk

Walau bagaimanapun, kod ini mungkin tidak berfungsi jika div dalam tidak mempunyai kedudukan yang ditentukan. Secara lalai, elemen mempunyai kedudukan "statik", yang tidak membenarkan kedudukan mutlak.

Untuk menyelesaikan isu ini, anda perlu menetapkan kedudukan div dalam kepada "mutlak" atau "relatif." Ini membolehkan anda menggunakan sifat "kiri" untuk meletakkan elemen dalam div induk.

#inner {
   width: 400px;
   height: 300px;
   background-color: #090;
   position: absolute;  // Or position: relative;
   left: 50%;
}
Salin selepas log masuk

Dengan menetapkan kedudukan kepada "mutlak", div dalam dipisahkan daripada aliran dokumen biasa dan boleh diletakkan menggunakan koordinat mutlak. Sifat "kiri" kini ditafsirkan sebagai offset mendatar dari tepi kiri div induk, dengan berkesan memusatkan div dalam di dalamnya.

Atas ialah kandungan terperinci Mengapakah Harta CSS Saya 'ditinggalkan' Tidak Memusatkan Elemen Saya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan