Build UIs that don't suck #2: So you think you can center things?

영상바로가기

문제상황

item-center로 아이콘과 글씨 간 중앙 정렬을 잘 했지만

카드를 리사이즈 했을 때, 아이콘이 전체 블락에 대해 center된다. 우리가 원하는 건 리사이즈에 상관없이 첫째 줄에 아이콘이 중앙으로 맞춰지는 것이다.

기존 코드

<ul role="list" class="text-sm/6">
	<li class="flex items-center gap-x-3">
      <svg class="size-5 flex-none"/>
      Ultimate something text.Ultimate something textUltimate something text
  	</li>
</ul>

개선

• item-start로 바꾸기
• 현재 텍스트의 line-height는 24px, svg 사이즈는 20px
• span태그로 svg를 감싸기 -> 텍스트의 line-height와 맞춘 후 items-center 하기

<ul role="list" class="text-sm/(--line-height) [--line-height:--spacing(6)]">
	<li class="flex items-start gap-x-3">
      <span class="flex h-(--line-height) items-center">
      	<svg class="size-5 flex-none"/>
      </span>
      Ultimate something text.Ultimate something textUltimate something text
  	</li>
</ul>

lh를 사용하여 위와 동일한 효과를 보여줄 수 있다.
텍스트의 height와 svg를 감싼 span을 동일하게 두어 items-start로 첫째 줄과 중앙정렬을 맞출 수 있게 되었다.

<ul role="list" class="text-sm/6 ">
	<li class="flex items-start gap-x-3">
      <span class="flex h-[1lh] items-center">
      	<svg class="size-5 flex-none"/>
      </span>
      Ultimate something text
  	</li>
</ul>

알게된 점

• lh: 현재 line height
• svg를 텍스트와 맞추기 위해 텍스트의 lh를 준다
• svg태그에서 viewBox가 있는데 이와 맞지않는 size를 주게되면 svg는 컨텐츠를 센터로 만든다.