text-align을 이용해 블록요소 중앙에 위치시키기

개요

모던 웹 디자인 책을 읽으며 배운 점을 정리합니다.

 

text-align

책에서 ul 태그를 text-align을 사용하여 중앙 정렬합니다. text-align으로 어떻게 중앙 정렬이 가능한지 궁금하였습니다.

text-align 속성은 인라인 요소를 문서의 수평측에서 특정 위치로 정렬할 때 사용합니다.

(img 태그의 경우 text-align 속성을 직접 적용하면 정렬되지 않고 블록 요소로 감싸준 뒤 사용해야 정렬됩니다)

 

 

수평측에서 블록요소 정렬하기

그러면 텍스트를 정렬 시키는 위 속성으로 블록 요소를 정렬할 수 있을까요? 네 있습니다.

 

일단 일반적인 블록 요소에 text-align 속성을 적용하면 정렬이 되지 않습니다. 아래 그림과 같이 text-align: center 속성을 주어도 정렬이 되지 않습니다.

 

왜냐하면 div 블록 요소는 부모 영역의 가로(span)영역을 다 차지하기 때문에 수평으로 정렬하고 싶어도 할 수 없는 것입니다. 이를 해결하려면 div가 가로영역을 다 채우는 대신, 특정 width 를 갖게끔 display 속성에 inline-block 을 주면 text-align 속성이 적용됩니다.

 

 

이미지도 위처럼 중앙정렬하고 싶은 블록 태그를 text-align 속성이 적용된 부모 블록 태그로 감싸주어 적용하면 가운데 정렬할 수 있습니다.

 

출처

https://www.freecodecamp.org/news/how-to-center-things-with-style-in-css-dc87b7542689/