아이콘을 텍스트와 정렬하는 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 */
}

이 기술을 사용하면 글꼴 크기 변경에 관계없이 일관된 수직 정렬을 보장하여 더욱 깔끔하고 전문적인 레이아웃을 얻을 수 있습니다.

위 내용은 아이콘을 텍스트와 정렬하는 CSS 팁의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!