Mengapa Teks Butang Dipusatkan Secara Tegak Secara Lalai, tetapi Teks Div Tidak?

Memahami Penjajaran Menegak Teks Butang

Pertimbangkan penanda HTML dan gaya CSS berikut:

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

Apabila anda menggunakan gaya ini, anda perasan bahawa teks dalam elemen dijajarkan secara menegak, manakala teks dalam

bukan.

Sihir Misterius

Secara lalai, elemen mempunyai elemen terbina dalam yang dipanggil moz-button-content. Elemen ini tidak boleh diakses melalui CSS dan memaparkan blok, mewarisi ketinggian butang. Walau bagaimanapun, kod dalaman penyemak imbas mengandungi peraturan berkod keras yang meletakkan kandungan butang secara menegak di tengah-tengah elemen kandungan moz-button.

Memusatkan Teks dalam Div

The -webkit-box-align property tidak berfungsi untuk memusatkan teks dalam

kerana

elemen tidak mempunyai elemen terbina dalam seperti moz-button-content. Untuk memusatkan teks dalam

, anda boleh menggunakan ketinggian garis yang sama dengan ketinggian div.

Kesimpulan

Pemusatan menegak teks dalam elemen disebabkan oleh gabungan elemen moz-button-content dan peraturan kedudukan menegak berkod keras pelayar. Sebaliknya, memusatkan teks dalam

elemen memerlukan penggunaan ketinggian garis.

Atas ialah kandungan terperinci Mengapa Teks Butang Dipusatkan Secara Tegak Secara Lalai, tetapi Teks Div Tidak?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!