CSS 提示將圖示與文字對齊

>發現CSS cap單元：一個強大的精確印刷對齊工具！ 一個單元等於目前字體中大寫字母的高度。如下所示，這對於將圖示與文字對齊特別有用。 cap>

html＆css

這是使用它的方法：將圖示的高度設為，以與相鄰文字的無縫集成，例如在按鈕中。 下面的範例使用

>輕鬆對齊。 1cap> flexbox

<div class="container">
  <img class="icon" src="gear-icon.svg" alt="Gear Icon">
  <h3>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 */
}

以上是CSS 提示將圖示與文字對齊的詳細內容。更多資訊請關注PHP中文網其他相關文章！