Astuce CSS pour aligner les icônes avec le texte

Découvrez l'unité CSS cap : un outil puissant pour un alignement typographique précis ! Une unité cap équivaut à la hauteur d'une lettre majuscule dans la police actuelle. Ceci est particulièrement utile pour aligner les icônes avec le texte, comme démontré ci-dessous.

HTML & CSS

Voici comment l'utiliser : définissez la hauteur de l'icône sur 1cap pour une intégration transparente avec le texte adjacent, comme dans les boutons. L'exemple ci-dessous utilise flexbox pour un alignement facile.

<code class="language-html"><div class="container">
  <img class="icon" src="gear-icon.svg" alt="Gear Icon">
  <h3>CSS</h3>
</div></code>

<code class="language-css">.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 */
}</code>

Cette technique garantit un alignement vertical cohérent quels que soient les changements de taille de police, ce qui donne lieu à des mises en page plus propres et plus professionnelles.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!