새소식

인기 검색어

HTML & SCSS (CSS3)

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

  • -

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

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

 


아이콘과 텍스트를 나란히 배치하는 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>

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

svg { width: 4rem; height: 4rem; } span { font-size: 4rem; }

 

내 프로필

 

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


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

기본적으로 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를 구현할 때 유용하다.


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; }

 

내 프로필

 

포스팅 주소를 복사했습니다

이 글이 도움이 되었다면 공감 부탁드립니다.