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