본문 바로가기

잉고래의 티스토리

CSS에서 DIV 내의 텍스트 세로 줄바꿈 중앙 정렬 하는법

CSS에서 DIV 내의 텍스트 세로 줄바꿈 중앙 정렬 하는법

CSS로 작업을 하다 보면 DIV 내에 들어가는 문장을 세로 중앙 정렬 하고 싶을때가 많이 있습니다. 언뜻 생각해 보기에 vertical-align : middle; 속성으로 하면 될 듯 하지만 그렇지 않습니다. vertical-align으로 왜 텍스트 정렬이 안될까요?

블럭(block)과 인라인(inline)

vertical-algin 속성은 인라인 엘리먼트(inline elements)를 정렬하는데 사용합니다. 엘리먼트는 블록 엘리먼트(block element)와 인라인 엘리먼트(inline element)로 나뉘어 집니다. 두개의 차이점은 블록 엘리먼트(block element)는 자기가 속한 요소의 한줄 전체를 차지한다는 점이고 인라인 엘리먼트(inline element)는 자기 컨텐츠 만큼 폭이 정해지고 텍스트와 함께 흘러간다는 점이 다릅니다.

Vertical-algin으로 세로 정렬 할려면?

앞서 얘기한 바와 같이 vertical-align 속성은 인라인 엘리먼트를 정렬할 수 있다고 하였습니다. 따라서 텍스트에 대해서 세로 정렬을 할 수 없었던 것이지요. 그렇다면 방법은해당 텍스트를 인라인 속성으로 변경해 주면 됩니다.바로 display: table-cell; 속성을주면 엘리먼트가 테이블셀 즉 인라인 속성이 되어 세로 정렬이 가능하게 됩니다. (참고 : 하지만익스플로러 6,7에 대해서는 이 속성이 동작하지 않는 단점이 있습니다. 다양한 브라우저 호환성을 유지하고자 한다면 display: inline; zoom:1; 속성을 추가로 적용해 주는 방법이 있습니다. 참조 : http://lisence.kr/meta/test/3464)

줄바꿈 시에 단어가 잘리지 않게 할려면?

여러줄에 대해서 vertical-align으로 세로 중앙 정렬을 하고 싶을때도 있을것입니다. 이때 줄이 바뀌어지는 시점에서 단어가 잘리는 경우를 볼 수 있는데요. 그럴때에는 word-break: keep all; 속성을 줘서 단어가 줄바꿈시에 잘리지 않도록 할 수 있습니다. 익스플로러 버전에서만 지원되는 단점이 있지만 말이죠.

추가 : word-break 속성을 쓰지 않고 다른 브라우저에서도 동작되게 하는 방법이 있군요. 바로 word-wrap 속성을 사용하는 방법입니다. 사용법은 아래와 같이 쓰면 됩니다.

.break-word {
  word-wrap: break-word;
}


정리

요약하면 세로 텍스트 정렬을 하려면 display: table-cell; 속성, 단어가 안잘리게 단어별 줄 바꿈하려면 word-break: keep-all; 속성을 쓰면 된다 입니다.물론 추가로 width, height, vertical-align, line-height, padding 등의 속성을 정해주도록 합니다. 이상으로 CSS에서 DIV 내의 텍스트 세로 줄바꿈 중앙 정렬 하는법을 알아보았습니다.