Bagaimanakah Penjajaran Menegak Sebenarnya Berfungsi dalam 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>

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;
}

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!