Rumah >hujung hadapan web >tutorial css >Bagaimana untuk Memusatkan Teks Secara Menegak dengan Ikon Font-Awesome dalam Butang Bootstrap?

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

Barbara Streisand
Barbara Streisandasal
2024-12-08 11:14:11798semak imbas

How to Vertically Center Text with Font-Awesome Icons in Bootstrap Buttons?

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!

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