아이콘과 레이블을 완벽하게 정렬하는 CSS 비법

Better Icon and Label Alignment

아이콘과 레이블을 완벽하게 정렬하는 CSS 비법

리스트에서 아이콘과 텍스트를 정렬할 때, 텍스트가 여러 줄로 감싸지면 아이콘이 중앙에 위치해 어색해 보인다. 이 글은 HTML 마크업에 아이콘이 있는 경우와 의사 요소로 아이콘을 추가한 경우 각각에 대해, flexbox와 lh 단위, calc(), aspect-ratio를 활용해 아이콘 크기, 폰트 크기, 컨테이너 너비가 변해도 항상 올바르게 정렬되는 두 가지 해결책을 제시한다.

고정된 값을 사용한 transform은 아이콘 크기, 폰트 크기, 컨테이너 너비가 변할 때 작동하지 않는다.

이 날의 다른 글

2026-09-18