CSS Tip to align icons with text

Discover the CSS cap unit: a powerful tool for precise typographic alignment! One cap unit equals the height of a capital letter in the current font. This is particularly useful for aligning icons with text, as demonstrated below.

HTML & CSS

Here's how to use it: Set the icon's height to 1cap for seamless integration with adjacent text, such as within buttons. The example below uses flexbox for easy alignment.

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

This technique ensures consistent vertical alignment regardless of font size changes, resulting in cleaner and more professional-looking layouts.

The above is the detailed content of CSS Tip to align icons with text. For more information, please follow other related articles on the PHP Chinese website!