Bagaimana untuk Memusatkan Teks Secara Menegak dengan Ikon Font Hebat dalam Butang Bootstrap?

Memusatkan Teks Menegak dengan Ikon Font-Awesome

Kadang-kadang apabila bekerja dengan butang Bootstrap yang menggabungkan kedua-dua ikon dan teks Font Awesome, menjajarkan teks secara menegak dengan ikon boleh terbukti mencabar. Biasanya, teks akan diselaraskan dengan tepi bawah ikon, seperti yang digambarkan dalam contoh JSFiddle ini.

Untuk membetulkan salah jajaran ini, elakkan mengubah suai penjajaran menegak teks. Sebaliknya, laraskan penjajaran menegak ikon Font Hebat.

Penyelesaian Penggayaan Dalam Talian:

`

<i>

`

Kelas CSS Penyelesaian:

`.icon {

vertical-align: middle;
font-size: 40px;

}

.my-text {

font-family: "Courier-new";

}

.bekas-saya-fancy {

...

}`

Pendekatan Alternatif:

Alternatif untuk menggunakan icon-2x ialah dengan menentukan saiz fon ikon secara manual, sebagai ditunjukkan dalam kod berikut coretan:

`

<span>

`

Pendekatan ini memberikan lebih fleksibiliti dalam mengawal saiz ikon. Lihat JSFiddle yang dikemas kini untuk contoh yang berkesan.

Atas ialah kandungan terperinci Bagaimana untuk Memusatkan Teks Secara Menegak dengan Ikon Font Hebat dalam Butang Bootstrap?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!