본문 바로가기

text-align

(2)
float 과 text-align 의 이상한 만남..? 아래 2개의 코드는 개념상 동일하게 렌더딩 되어야 함에도 불구하고, IE(MS 사의 인터넷 익스플로러) 몇가지 버전에서 다르게 표시가 되네요.. ㅠ.ㅜ 다른 웹브라우저들에서는 정상적으로 나오고요.. 1. ......... 2. ......... 그런데, 위의 2번으로 하면 두번째 span 태그의 내용이 다음 라인으로 밀려나는 현상이 발생하더군요. IE 모든 버전에서 그런 것이 아니고, IE7 과 IE8 의 몇몇 마이너버전(?)에서 발생했습니다. 볼수록 알 수 없는 MS 사의 개발 정책에 일단 두 손 다 들었습니다.
CSS 레이아웃 블럭을 가운데 정렬하는 방법 (margin:0 auto) 금방 떠오르는 생각은 text-align 속성을 사용하는 것인데요. text-align:center 로 하면 하위 요소에 상속을 주기 때문에 하위 블럭 안의 내용이 모두 가운데 정렬이 되어 버려요. 블럭 안의 내용은 가운데 정렬이 아니면서 블럭이 상위 블럭의 가운데로 표시되게 하려면 text-align 은 답이 아닙니다. 검색해 보시면, 가운데 정렬할때 maring:0 auto 를 주라는 것이 많을 거에요. margin 옵션의 값으로 "0 auto" 를 주라는 것인데, "0 auto" 는 "0 auto 0 auto" 와 동일한 의미입니다. 이전에 "10px 20px 30px 40px" 처럼 썼던 것은 기억하시죠..? 맨 처음 값이 블럭의 상단, 다음이 우측, 세번째가 하단, 네번쨰가 좌측, 이런식이죠. ..