Bagaimana untuk Menjajarkan Teks Secara Menegak dengan Ikon Hebat Fon Besar dalam Butang Bootstrap?

Penjajaran Menegak Teks dengan Ikon Hebat Fon Besar

Apabila bekerja dengan butang Bootstrap yang menggabungkan ikon dan teks Font Hebat, ia boleh mencabar untuk memusatkan teks secara menegak. Secara lalai, teks dijajarkan dengan tepi bawah ikon.

Untuk menyelesaikan isu ini, fokus pada melaraskan penjajaran menegak ikon dan bukannya teks. Begini caranya:

1. Penjajaran Menegak dengan Gaya Sebaris:

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

2. Penjajaran Menegak dengan CSS Kelas:

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

3. Elak Menggunakan Ikon-2x:

   Melaraskan saiz ikon menggunakan icon-2x mungkin terhasil dalam isu penjajaran. Sebaliknya, tetapkan saiz fon ikon secara eksplisit.

Dengan menggunakan teknik ini, anda boleh menjajarkan teks secara menegak dengan ikon Font Hebat yang besar, memastikan penampilan yang lebih estetik dan seimbang.

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