Mengapa Teks Butang Dipusatkan Secara Tegak Secara Lalai, tetapi Teks Div Tidak?-tutorial css-php.cn

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>

Salin selepas log masuk

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

Salin selepas log masuk

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!

sumber：php.cn

Artikel sebelumnya：Mengapakah Elemen yang Berkedudukan Mutlak Dalam Elemen yang Berkedudukan Relatif Mewarisi Kedudukannya daripada Induk Terdekatnya? Artikel seterusnya：Bagaimana untuk Menggayakan Panel `mat-select` dengan Berkesan dalam Bahan Sudut?

Kenyataan Laman Web ini

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 terbaru oleh pengarang

Isu terkini

function_exists() tidak boleh menentukan fungsi tersuai Ujian fungsi () {return true;} jika (function_exists ('test')) {echo "test is functio...

daripada 2024-04-29 11:01:01

1684

Bagaimana untuk memaparkan versi mudah alih Google Chrome Hello cikgu, bagaimana saya boleh menukar Google Chrome kepada versi mudah alih?

daripada 2024-04-23 00:22:19

1838

Tetingkap anak mengendalikan tetingkap induk, tetapi output tidak bertindak balas. Dua ayat pertama boleh dilaksanakan, tetapi ayat terakhir tidak boleh dilaksanakan.

daripada 2024-04-19 15:37:47

1561

Tiada output dalam tetingkap induk document.onclick = function(){ window.opener.document.write('Saya adalah output tetingkap ...