Bagaimana untuk Memusatkan Span secara Menegak dalam Div dalam CSS?

Cara Menegak Memusatkan Span dalam Div

Penjajaran menegak boleh membingungkan dalam CSS dan menjajarkan rentang dalam div bukanlah pengecualian.

Memahami Penjajaran CSS

Sebelum menyelami penyelesaian, adalah penting untuk memahami penjajaran menegak dalam CSS:

• Semula jadi Penjajaran: Elemen sebaris (seperti span) dijajarkan secara semula jadi pada garis dasar, iaitu bahagian bawah aksara terendah.
• Ketinggian Garisan: Garisan -sifat ketinggian menetapkan ketinggian kotak garisan, yang merangkumi kedua-dua watak dan mana-mana ruang utama.
• Ketinggian Intrinsik: Ketinggian intrinsik unsur ialah ruang yang digunakan tanpa sebarang penggayaan atau pelapik.

Teknik Penjajaran Menegak

Untuk memusatkan rentang secara menegak dalam div, pertimbangkan teknik ini:

1. Memadankan Ketinggian Garisan dengan Ketinggian Bekas:

Tetapkan ketinggian garisan rentang agar sepadan dengan ketinggian div. Contohnya, jika div adalah 15px tinggi, tetapkan line-height: 15px; dalam tempoh.

2. Kedudukan Mutlak:

Tetapkan kedudukan: mutlak; pada div dan kedudukan: mutlak; atas: 50%; pada rentang. Kemudian laraskan nilai margin atas rentang kepada separuh daripada ketinggian intrinsiknya.

3. Transform: translateY

Gunakan transform: translateY(-50%); harta dalam rentang. Ini menganjakkan rentang secara menegak sebanyak separuh daripada ketinggian intrinsiknya.

4. Flexbox

Gunakan Flexbox untuk memusatkan rentang secara menegak. Tetapkan paparan: flex; align-item: tengah; pada div dan margin: auto; pada rentang.

Sampel Kod

Berikut ialah contoh menggunakan kaedah ketinggian garis:

<div id="theMainDiv" style="height: 15px; line-height: 15px;">
  <span id="tag1_outer">as</span>
</div>

Atas ialah kandungan terperinci Bagaimana untuk Memusatkan Span secara Menegak dalam Div dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!