Mozilla 한국 커뮤니티

다름이 아니라~
css를 이용한 코딩을 하고 있는데
하면서 늘 되지 않았던 것이여서 질문하려구요~^^;;

div내에서 가운데 정렬을 하려면 어찌해야하나요?
align:"center"
float:center
이렇게 두가지는 익스플로러나 파이어폭스에서 전부 먹질 않구요
text-align:center의 경우엔 익스플로러에서만 되네요~

div 내에서 center로 정렬을 주고~ 그 안에 테이블로 코딩을 할껀데~
가운데 정렬이 먹지 않아서요~^^;;;;;
어찌 하면 되는지 알려주세요~~

text-align 은 inline 요소에만 적용됩니다. 하지만 table 은 block 요소 입니다. 따라서 IE 가 잘못된 렌더링을 취하고 있는 것입니다. 버그라고 봐야죠.

따라서 block 요소에 대한 가운데 정렬은 여러가지 방법이 있습니다만 가장 잘 알려진, 쉬운 방법은 아래와 같습니다. 해당 요소의 margin 에 대하여 좌우 마진을 auto 로 주는 방법 입니다. 이 방법은 좌우로부터의 중앙정렬에만 유효한 방법이며 수직 중앙정렬은 해당사항 없습니다. W3C는 박스 안에서 무언가를 수직으로 중앙정렬 하는 것을 지원하지 않고 있으며 vertical-align 속성은 td 와 inline 요소에만 적용이 가능합니다. 수직 정렬에 대하여는 기본값으로 최상단 정렬을 권장하고 있다고 보는것이 타당한 것 같습니다.

그리고 이러한 게시물은 '자유게시판' 보다는 '웹 표준화 프로젝트' 게시판이 적당합니다.

Code: Select all

<DOCTYPE>
<html>
<head>
<meta>
<title>무제 문서</title>
<style>
div { width: 40em; border:1px dotted #000;}
div table { background:#CCC; margin:0 auto;} 
</style>
</head>
<body>
<div>
  <table>
    <tr>
      <th>&nbsp;</th>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <th>&nbsp;</th>
      <td>&nbsp;</td>
    </tr>
  </table>
</div>
</body>
</html>

Mozilla 한국 커뮤니티

css관련 질문입니다.. 여기에 해도 되나요?

css관련 질문입니다.. 여기에 해도 되나요?

Block 요소의 수평 가운데 정렬 팁.