ICONをテキストに合わせるためのCSSチップ

CSS cap ユニットを発見してください: 正確な文字体配置のための強力なツールです。 1 つの cap 単位は、現在のフォントの大文字の高さに相当します。これは、以下に示すように、アイコンをテキストと位置合わせする場合に特に便利です。

HTML と CSS

使用方法は次のとおりです: ボタン内など、隣接するテキストとシームレスに統合するには、アイコンの高さを 1cap に設定します。 以下の例では、位置合わせを容易にするために flexbox を使用しています。

<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 */
}

この手法により、フォント サイズの変更に関係なく、一貫した垂直方向の配置が確保され、よりクリーンでプロフェッショナルな外観のレイアウトが得られます。

以上がICONをテキストに合わせるためのCSSチップの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。