텍스트 세로 중앙 정렬에 관한 문제.

CSS 2011. 2. 14. 11:48
코딩을 하다보면 아래와 같은 상황이 꽤 빈번하게 발생한다. 이번 프로젝트에서도 당연히 나왔다. 현재 해결이 안되어 놔두고 있는데 요지를 살펴보면 W3C에서는 권장하지 않는다는 것이다. 뭐 이것도 css3에서는 관련 태그가 나온걸 보니 보강되어 진듯 하다.

이것 하나때문에 htc를 사용하는것도 내키지 않고 li 태그를 마크업 무시하고 테이블로 바꾸는것도, 빈 이미지를 삽입하는 것도 내키지 않아 방법을 고민중이긴 한데 css2로는 해결이 불가능해 보인다.

table-cell 이 ie6,7만 없다면 가장 좋은 방법인데....이걸 사용할 수 없으니 너무 답답하다. 후....

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

virtical-align 은 inline 속성을 가진 요소에만 직접 적용하여 사용할 수 있습니다. 즉, 블럭요소에는 적용되지 않습니다.
위와같이 적용하면 알파벳 d가 아닌 div 요소 자체를 수직정렬 시키는 모양이 되는데 div 는 block 속성을 가지고 있으므로 수직정렬 되지 않습니다. .page 내부의 요소를 수직정렬 시키려면 다음과 같이 하셔야 합니다.

.page * { vertical-align:middle; display:inline;} /*공용선택자를 사용해서 page 내부의 모든 요소를 inline 형태로 재정의 하였음*/

<div class="page"><img src="http://standardmag.org/images/cdk_logo.gif" width="172" height="100" /><p>Hello!</p></div>

이 때 div 요소는 수직정렬시키는데 아무런 영향을 미치지 않고 img 와 p 태그 가 서로 의존적인 형태로 수직정렬 됩니다.
img 요소의 높이가 p 보다 높기 때문에 img 요소를 기준으로 p 가 수직 정렬된 형태 입니다.
예제를 보아 알 수 있듯 엘리먼트 혼자서는 수직정렬 되지 않고 주변의 inline 요소들과 함께 어울렸을 때 주변 요소를 상대적인 기준으로 잡은 다음 자신의 수직 위치를 결정하게 됩니다.

예외적으로 td 에는 vervical-align 을 적용시켜서 내부 요소를 수직정렬 시킬 수 있습니다.
하지만 다른 요소(div 와 같은 블럭요소)에는 안됩니다.

본래 div 태그에 대하여 display:table-cell; vertical-align:middle 속성을 주면 div 요소가 td 처럼 렌더링 되기 때문에 손쉽게 수직정렬 시킬 수 있지만 이 부분은 IE6~7 모두 렌더링 되지 않는 버그가 있습니다. IE 는 display:table-cell 이라는 속성을 무시하기 때문입니다.

W3C 스펙을 가만히 살펴보면 저렇게 텍스트로 된 콘텐트를 박스모델 안에서 수직정렬 되도록 하는 것을 지원하지 않고 있습니다. 개인적인 견해로 볼 때 가능하면 그러한 방식을 사용하지 말라는 의미로 해석되기도 합니다. 한편 이미지 등의 표현요소를 배경에서 중앙정렬 시키는 것은 쉽습니다. 하지만 텍스트 콘텐트는 박스모델의 기본 속성에 따라서 최상단으로 부터 순서대로 표현되도록 하는 것이 좋겠습니다.

 

출처 : http://forum.standardmag.org/viewtopic.php?id=915

 

여기서 핵심은 * 를 붙이는 것이다.

'CSS' 카테고리의 다른 글

css3 라운드박스  (0) 2011.04.05
텍스트 정렬에 관한 문제 2  (0) 2011.02.14
css 텍스트 말줄임  (1) 2011.01.04
텍스트 줄바꿈 처리 word-break, white-space  (0) 2011.01.04
td 안에 div height:100% 만들기  (0) 2010.12.08
: