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

Penjajaran Menegak Teks dengan Ikon Font-Awesome

Apabila bekerja dengan butang Bootstrap yang mengandungi ikon dan teks Font-Awesome, memusatkan teks secara menegak boleh menjadi cabaran. Pada mulanya, melaraskan penjajaran menegak teks dalam butang mungkin kelihatan seperti penyelesaian yang mudah. Walau bagaimanapun, pendekatan yang lebih berkesan melibatkan penetapan penjajaran menegak ikon Font-Awesome sebaliknya.

Dengan mengubah suai penjajaran menegak ikon, teks akan dijajarkan secara menegak secara berpusat. Ini boleh dicapai dengan menambahkan vertical-align: middle; kepada gaya sebaris elemen span yang mengandungi ikon, seperti ditunjukkan di bawah:

<span>

Sebagai alternatif, untuk mengelakkan penggayaan sebaris, kelas CSS tersuai boleh dibuat dan digunakan pada rentang ikon:

.my-icon {
    vertical-align: middle;
    font-size: 40px;
}

Pendekatan ini memberikan lebih fleksibiliti dan kawalan ke atas penggayaan ikon.

Daripada bergantung pada lalai kelas icon-2x, menentukan saiz fon secara manual membolehkan penyesuaian yang lebih besar bagi penampilan ikon. Berikut ialah contoh menggunakan CSS:

.my-icon {
    vertical-align: middle;
    font-size: 40px;
}

.my-text {
    font-family: "Courier-new";
}

Dengan pelarasan ini, teks akan dipusatkan secara menegak bersama ikon dalam butang.

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