CSS로 아이콘과 텍스트를 수평 정렬하기

웹에서 아이콘(icon)과 텍스트(text)를 함께 배치해야 하는 경우가 있다. 예를 들어, 버튼(button) 안에 아이콘과 텍스트가 같이 있으면 사용자에게 해당 버튼의 용도를 좀 더 빠르게 전달할 수 있고, 뿐만 아니라 같은 버튼인데 데스크탑 화면에서는 텍스트만 모바일 화면에서는 아이콘만 보여주어야 할 때도 있다.

이럴 때 사용할 수 있는 CSS 스타일링 요령에 대해서 알아보았다.

 

---

1. HTML 마크업

아이콘과 텍스트를 나란히 배치하는 HTML 코드를 작성하였다. 아이콘은 SVG를 텍스트는 <span> 태그를 사용하였다.

<div>
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
    <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
    <circle cx="12" cy="7" r="4" /></svg
  ><span> 내 프로필 </span>
</div>

 

---

2. 기본 스타일링

정렬을 하기 전에 중요한건 우선 SVG 이미지와 텍스트의 크기를 비슷하게 맞춰주는 것이다. 아이콘 크기와 텍스트 크기가 반드시 정확히 동일할 필요는 없고 사용 사례에 따라서 약간의 차이는 있어도 된다.

svg {
  width: 4rem;
  height: 4rem;
}

span {
  font-size: 4rem;
}

 

내 프로필

 

위의 화면을 보면 아이콘과 텍스트의 크기를 맞췄지만 정렬이 약간 틀어져있는 것을 볼 수 있다.

 

---

3. vertical-align

그렇다면 어떻게 아이콘과 텍스트를 수평으로 나란히 정렬할 수 있을까?

기본적으로 SVG도 인라인(inline) 요소이고, 텍스트도 인라인 요소이다. 따라서 인라의 요소를 수평 방향으로 정렬을 맞춰주는 CSS의 vertical-align 속성을 사용다면 된다.

두 요소에 동일하게 vertical-align 속성을 middle로 설정해주면 아이콘과 이미지의 정렬이 맞는 것을 볼 수 있다.

svg,
span {
  vertical-align: middle;
}

 

내 프로필

 

하지만 이 스타일 방법의 단점은 아이콘과 텍스트 간의 거리를 정확히 원하는 값으로 설정하기 어렵다. 왜냐하면 인라인 요소 간의 간격은 letter-spacing 속성이 결정하는데 이 속성값을 바꿀 경우 단어 간의 간격에도 영향을 주게 되기 때문이다.

 

---

4. Flexbox

이 번에는 Flexbox(플렉스박스)를 활용해서 아이콘과 텍스트를 수평으로 나란히 정렬해 보았다.

아이콘과 이미지의 부모 요소를 Flexbox로 만들고, align-items 속성을 center로 설정해주면 되는데 이 방법은 gap 속성을 통해서 아이콘과 이미지 간의 간격을 자유롭게 조정할 수도 있다.

 

div {
  display: flex;
  align-items: center;
  gap: 1rem;
}

 

내 프로필

 

이 스타일 방법은 특히 버튼(button)이나 태그(tag), 레이블(label)과 같은 UI를 구현할 때 유용하다.

 

---

5. 응용: 세로 배치

Flexbox를 활용하면 아이콘과 텍스트를 가로, 세로 나란히 배치할 수 도 있다.

svg {
  width: 4rem;
  height: 4rem;
  padding: 8px;  border: 2px solid;  border-radius: 9999px;}

span {
  font-size: 2rem;}

div {
  display: flex;
  flex-direction: column;  align-items: center;
  gap: 1rem;
}

 

내 프로필