Rumah >hujung hadapan web >tutorial css >Mengapa Teks Butang Dipusatkan Secara Tegak Secara Lalai, tetapi Teks Div Tidak?

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

Susan Sarandonasal: 2024-10-26 12:06:021012semak imbas

Why is Button Text Vertically Centered by Default, but Div Text Isn't?

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!

css html webkit for internal Property default this

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Mengapakah Elemen yang Berkedudukan Mutlak Dalam Elemen yang Berkedudukan Relatif Mewarisi Kedudukannya daripada Induk Terdekatnya?Artikel seterusnya：Mengapakah Elemen yang Berkedudukan Mutlak Dalam Elemen yang Berkedudukan Relatif Mewarisi Kedudukannya daripada Induk Terdekatnya?

Artikel berkaitan

Lihat lagi