Bagaimanakah Saya Boleh Menjajarkan Elemen Sebaris/Sebaris Secara Menegak dalam CSS?

Menjajarkan Elemen Sebaris/Sebaris Secara Menegak dalam CSS

Memahami penjajaran menegak dalam CSS boleh menjadi penting apabila membuat reka letak yang dijajarkan secara menegak. Walaupun menggunakan sifat penjajaran menegak yang sesuai, elemen mungkin berterusan dalam peralihan tanpa diduga.

Ambil contoh yang disediakan:

<div>
  <a></a><a></a>
  <span>Some text</span>
</div>

Di sini, elemen rentang kekal ditolak ke bawah walaupun menggunakan kedua-dua "penjajaran menegak :tengah;" dan "vertical-align:top;".

Kunci untuk menyelesaikan isu ini terletak pada pemahaman bahawa "vertical-align" digunakan pada elemen yang dijajarkan, bukan bekas induknya. Untuk menjajarkan anak unsur "div" secara menegak, gunakan peraturan CSS:

div > * {
    vertical-align:middle;  // Align children to middle of line
}

Dengan perubahan ini, anak unsur "div" akan dijajarkan secara menegak dalam div induk.

Nota: "menjajarkan menegak" menjajarkan relatif kepada baris teks semasa, bukan ketinggian penuh div bekas. Untuk memusatkan elemen dalam div induk yang lebih tinggi, tetapkan sifat "ketinggian garis" div induk dan bukannya ketinggiannya. Untuk contoh praktikal, rujuk pautan jsfiddle yang disediakan dalam soalan asal.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menjajarkan Elemen Sebaris/Sebaris Secara Menegak dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!