Petua CSS untuk menjajarkan ikon dengan teks

Temui unit CSS cap: alat berkuasa untuk penjajaran tipografi yang tepat! Satu unit cap sama dengan ketinggian huruf besar dalam fon semasa. Ini amat berguna untuk menjajarkan ikon dengan teks, seperti yang ditunjukkan di bawah.

HTML & CSS

Begini cara menggunakannya: Tetapkan ketinggian ikon kepada 1cap untuk penyepaduan lancar dengan teks bersebelahan, seperti dalam butang. Contoh di bawah menggunakan flexbox untuk penjajaran mudah.

<div class="container">
  <img class="icon lazy"  src="/static/imghwm/default1.png"  data-src="gear-icon.svg"  alt="Gear Icon">
  <h3 id="CSS">CSS</h3>
</div>

.container {
  display: flex;
  align-items: baseline; /* Aligns items to the baseline of the text */
  gap: 0.5rem;          /* Adds spacing between icon and text */
}

.container .icon {
  height: 1cap;
  aspect-ratio: 1;      /* Maintains the icon's aspect ratio */
}

Teknik ini memastikan penjajaran menegak yang konsisten tanpa mengira perubahan saiz fon, menghasilkan reka letak yang lebih bersih dan kelihatan profesional.

Atas ialah kandungan terperinci Petua CSS untuk menjajarkan ikon dengan teks. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!