Rumah > hujung hadapan web > tutorial css > Bagaimanakah Penjajaran Menegak Sebenarnya Berfungsi dalam CSS?

Bagaimanakah Penjajaran Menegak Sebenarnya Berfungsi dalam CSS?

DDD
Lepaskan: 2024-11-07 05:01:02
asal
553 orang telah melayarinya

How Does Vertical Alignment Actually Work in CSS?

Penjajaran Menegak dalam CSS: Memahami Nuansa

Sifat penjajaran menegak membolehkan anda meletakkan elemen sebaris secara menegak dalam elemen induknya. Walau bagaimanapun, tingkah lakunya boleh diramalkan melainkan anda memahami prinsip asas.

Elemen Sebaris dan Ketinggian

Penjajaran menegak hanya mempengaruhi elemen sebaris. Elemen seperti

dan <div> adalah tahap blok dan tidak terjejas. Untuk elemen sebaris tanpa ketinggian garis yang wujud, seperti dan , anda perlu menetapkan satu secara eksplisit menggunakan sifat ketinggian garis.

Penjajaran Tinggi dan Menegak

Ketinggian elemen induk mesti mempunyai nilai statik (iaitu, bukan auto atau peratusan). Jika ketinggian tidak dinyatakan, penyemak imbas akan mengiranya berdasarkan kandungan, yang boleh membawa kepada hasil yang tidak dijangka.

Letakkan Elemen Sebaris

Bertentangan dengan penjajaran teks , yang digunakan pada elemen yang mengandungi tahap blok, penjajaran menegak hendaklah digunakan pada elemen sebaris yang anda mahu letakkan.

Perbezaan Penyemak Imbas

Pelayar lama mungkin tidak menyokong penjajaran menegak secara konsisten. Walau bagaimanapun, penyemak imbas moden mengendalikannya dengan baik, walaupun digunakan pada elemen bukan sebaris.

Contoh: Teks Memusatkan

Sebagai contoh, katakan anda mempunyai HTML berikut:

<div>
Salin selepas log masuk

Untuk memusatkan teks secara menegak dalam #dalam, gunakan penjajaran menegak: tengah ke #header:

#header {
  display: inline-block;
  line-height: 1em;
  margin: 0;
  vertical-align: middle;
}
Salin selepas log masuk

Perhatikan bahawa dalam contoh ini, #inner ialah blok sebaris elemen dengan ketinggian tetap.

Atas ialah kandungan terperinci Bagaimanakah Penjajaran Menegak Sebenarnya Berfungsi dalam CSS?. 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
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan