CSS, 테이블 중앙 정렬
페이지 정보
작성자 서방님 댓글 0건 조회 123회 작성일 13-12-20 15:26본문
출처 : http://disabu.egloos.com/1143926
테이블을 수평방향으로 중앙에 정렬하기 위해
<div style="text-align: center;"></div>으로 감쌋더니
IE에서는 테이블이 중앙에 오는데 FF에서는 여전히 좌측에 붙어있다.
IE는 텍스트건 뭐건 관계없이 중앙에 정렬해버린 반면 FF는 테이블을 텍스트로 보지 않아서 그런 것인가.
여하튼 IE와 FF에서 공히 사용할 만한 방법을 찾던 중
<table align="center">란 것이 있는데 이것은 deprecated란다.
또 다른 것으로 <center></center>로 table을 감싸는 것이 있고...
css를 사용한 방법을 찾는 것이 가장 바람직 하다는 생각이 들어서 겨우 찾게 된 방법은 바로~~
테이블의 마진을 상하는 0px로, 좌우는 auto.
수평방향으로 남은 여백을 좌우에 동등하게 분배한다는 의미인듯.
(첨) image의 중앙정렬은 img태그의 스타일을 지정해서는 안되므로 img를 div 또는 p태그로 감싼 후 위의 스타일을 적용하거나 text-align속성을 지정하여 수행된다. img는 인라인요소로서 텍스트와 유사한 특성을 지닌다.
CSS2 규격 한글 번역문중에 다음과 같은 내용이 있다.
....
만일 'margin-left'와 'margin-right' 둘다 'auto'이면, 그들의 계산된 값들은 같다.
아래는 원문이다. 의미를 정확하게 전달하는데는 영어가 유리한 측면이 있다.
CSS 2.1 Specification
....
If both 'margin-left' and 'margin-right' are 'auto', their used values are equal. This horizontally centers the element with respect to the edges of the containing block.
References
(첨) 이 CSS의 속성을 이해함으로써 더 이상 태그의 속성 중 align이란 속성을 기억할 필요가 없어졌다. 왜 align이란 속성이 deprecated 되었는지 알 수 있는 부분이다. 이제 HTML은 구조적인 규정만을 전담, 세세한 양식은 CSS가 전담, 이렇게 변해가는 것 같다. 기술 발전의 가장 극적인 부분은 단순화 과정인 것 같다. 여담이지만 과거에 모 회사 홈페이지 제작을 1억을 받고 한 친구가 있었다. 그가 1억 받고 한 일을 지금은 일반인들이 하고 있다. 세상은 그렇게 변해가고 있다.
(첨2) 덧글로 조언해 주신 분의 얘기를 실험해 보았다.
결과는 표준모드에서는 테이블의 바깥 쪽 <div>의 text-align과 <table>의 정렬과는 무관해 보인다.
실험용 웹문서: [with DTD] HTMLPage00.htm [without DTD] HTMLPage11.htm
두 문서의 차이는 단지 아래의 <!DOCTYPE>이 있고 없고의 차이 뿐이다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
위의 두 문서를 IE와 FF에서 열어보면 FF에서는 두 문서가 동일, IE에서는 다른 결과를 보여준다.
댓글목록
등록된 댓글이 없습니다.
