Bagaimanakah elemen mencapai pemusatan teks menegak?

Memusatkan Teks Secara Menegak dalam Elemen

Apabila menggunakan elemen, seseorang mungkin perasan bahawa teks di dalamnya secara automatik dipusatkan secara menegak. Tingkah laku ini boleh dikaitkan dengan gabungan faktor, termasuk gaya yang ditentukan penyemak imbas dan aspek HTML dan CSS tertentu.

Struktur HTML dan Hierarki Elemen

Dalam < butang> elemen, Firefox dan pelayar lain mencipta elemen dalaman yang dipanggil moz-button-content. Elemen ini diletakkan di antara tag dan anak-anaknya. Yang penting, ia ditetapkan untuk memaparkan blok, menghalang CSS daripada menjejaskan penggayaannya secara langsung.

Kedudukan Menegak Dikuatkuasakan Penyemak Imbas

Dalam Firefox, penyemak imbas menguatkuasakan kedudukan menegak kandungan butang. Kod yang bertanggungjawab untuk ini hidup dalam fail sumber "nsHTMLButtonControlFrame.cpp." Khususnya, ia mengira ruang tambahan dalam butang dan melaraskan nilai childPos.B() dengan sewajarnya, memastikan kandungan kanak-kanak dipusatkan dalam ruang yang tersedia.

Peranan Ketinggian dalam Pemusatan Menegak

Menyediakan nilai ketinggian untuk mendayakan pemusatan menegak kerana ia mengatasi gelagat lalai unsur moz-button-content. Tanpa ketinggian yang ditentukan, elemen moz-button-content hanya akan setinggi kandungannya, menghasilkan penjajaran bawah dalam butang. Dengan menetapkan ketinggian, kami mencipta ruang tambahan dalam butang, membenarkan pemusatan yang dikuatkuasakan oleh penyemak imbas berkuat kuasa.

Contoh

Pertimbangkan contoh berikut:

<button>Button content</button>

CSS:

button {
  height: 48px;
}

Dalam kes ini, kandungan butang akan dipusatkan secara menegak dalam ketinggian 48px, walaupun sifat blok paparan elemen moz-butang-kandungan.

Atas ialah kandungan terperinci Bagaimanakah elemen mencapai pemusatan teks menegak?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!