Bagaimanakah Elemen `` Mencapai Penjajaran Teks Menegak Tanpa `garis-tinggi` yang Eksplisit?

Penjajaran Menegak Enigmatik dalam Elemen

Dalam dunia pembangunan web, elemen sering membingungkan kita dengan keupayaannya yang kelihatan ajaib untuk mengekalkan teksnya secara menegak. Untuk membongkar misteri ini, mari kita analisa coretan HTML dan CSS:

<code class="html"><button class="button">Some Text</button>
<div class="button">Some Text</div></code>

<code class="css">.button {
  background: darkgrey;
  height: 40px;
  border: 2px solid grey;
  width: 100%;
  box-sizing: border-box;
  font-size: 14px;
  font-family: helvetica;
  text-align: center;
  margin-bottom: 20px;
}</code>

Dalam senario ini, teks dalam elemen kekal dipusatkan walaupun tiada sifat ketinggian garisan yang jelas.

Menyelidiki Keajaiban Penyemak Imbas

Apabila memeriksa pemaparan penyemak imbas, kami menemui elemen tersembunyi yang bersarang dalam butang tag. Dalam Firefox, ia dipanggil moz-button-content. Elemen ini ditakrifkan dalam lembaran gaya ejen pengguna penyemak imbas sebagai:

<code class="css">*|*::-moz-button-content {
  display: block;
}</code>

Elemen tersembunyi ini memainkan peranan penting dalam memusatkan teks secara menegak. Ia ditetapkan untuk dipaparkan sebagai elemen blok, menyebabkan elemen itu menduduki keseluruhan ketinggian butang yang tersedia. Dalam elemen ini, teks secara semula jadi dijajarkan ke tengah.

Kedudukan Menegak Berkod Keras

Walau bagaimanapun, ini bukan cerita penuh. Penyemak imbas menggunakan gelagat berkod keras tambahan untuk elemen:

<code class="cpp">// Center child in the block-direction in the button
nscoord extraSpace =
    buttonContentBox.BSize(wm) - contentsDesiredSize.BSize(wm);

childPos.B(wm) = std::max(0, extraSpace / 2);</code>

Kod ini menunjukkan bahawa penyemak imbas sengaja menambah ruang tambahan pada kedua-dua belah teks dalam elemen moz-butang-kandungan, dengan berkesan memusatkannya secara menegak.

Meletakkan It All Together

Ringkasnya, penjajaran menegak dalam elemen timbul daripada dua faktor:

• Kehadiran elemen moz-button-content, yang memaparkan teks sebagai blok dan menjajarkannya secara semula jadi ke tengah.
• Yang sukar- tingkah laku penyemak imbas berkod yang memusatkan lagi elemen moz-button-content dalam butang.

Atas ialah kandungan terperinci Bagaimanakah Elemen `` Mencapai Penjajaran Teks Menegak Tanpa `garis-tinggi` yang Eksplisit?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!