Bagaimana untuk Memusatkan Teks dan Ikon Hebat Fon secara Menegak dalam Butang Bootstrap?

Penjajaran Teks Menegak dalam Butang dengan Ikon Font-Awesome

Apabila menggabungkan ikon Font-Awesome yang besar ke dalam butang bootstrap bersama teks, teks cenderung untuk sejajar dengan tepi bawah ikon, mewujudkan visual tidak seimbang penampilan.

Penyelesaian

Untuk memusatkan teks secara menegak, fokus pada menjajarkan ikon dan bukannya teks. Begini cara untuk mencapainya:

• Elakkan mengubah penjajaran menegak teks.
• Gunakan CSS untuk menetapkan sifat penjajaran menegak ikon Font-Awesome kepada "tengah. "

Contoh Kod

<div>
  <span class="icon icon-2x icon-camera">

Pendekatan Alternatif

Untuk penyesuaian lanjut, pertimbangkan untuk mengelakkan kelas icon-2x dan nyatakan saiz fon secara manual. Berikut ialah contoh:

<div class='my-fancy-container'>
    <span class='my-icon icon-file-text'></span>
    <span class='my-text'>Hello World</span>
</div>

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

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

.my-fancy-container {
    border: 1px solid #ccc;
    border-radius: 6px;
    display: inline-block;
    margin: 60px;
    padding: 10px;
}

Kesimpulan

Dengan melaraskan penjajaran menegak ikon Font-Awesome dan bukannya teks, anda boleh memusatkan dengan berkesan teks secara menegak dalam butang di sebelah ikon. Pendekatan ini memberikan penyesuaian dan fleksibiliti yang lebih besar dalam mengawal penampilan kandungan butang anda.

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