CSS- 포지션이 절대적이지는 중심 테이블 수평 중심 테이블 방법

Question

동일한 코드가있는 5 개의 HTML 페이지가 있습니다. 이것이 코드라고 말합니다.

<div id='generic'>
</div>

5 페이지는 모두 동일한 외부 CSS 파일로 연결됩니다.

<style>
    #generic {
        width: 700px;
        height: 500px;
    }
</style>

5 페이지 각각에 테이블을 삽입했습니다.

<div id='bottomBar'>
    <table id='bottomTable'>
        <tr id='bottomTr'>
        </tr>
    </table>
</div>

테이블에는 행이 하나뿐입니다. 한 줄에서는 1-10에서 임의의 숫자를 선택해야하며 이것이 얼마나 많은 TD의 행이 가질 것인지입니다. 따라서 첫 번째 HTML 페이지에는 2 개의 TD가 있고 두 번째는 6TD 등을 가질 수 있습니다. 테이블의 수직 위치가 모든 페이지 전체에서 동일하지만 테이블이 수평으로 정렬되어야합니다. 다른 사용자가 일부 페이지에 테이블 앞에 몇 단락을 입력 할 수 있으므로 일부 페이지에는 추가 단락이 없으므로 테이블의 수직 위치를 갖기 위해서는 추가 단락이 없을 수 있으므로 필요한 위치 절대를 사용해야합니다. 절대적인 위치. 모든 테이블이 수평 중심이되도록하려면 어떻게해야합니까? 수평으로 정렬되면, 모든 테이블에는 테이블의 수와 상관없이 왼쪽과 오른쪽에 균일 한 공백이 있음을 의미합니다.

margin: 0 auto;

나를 위해 작동하지 않습니다. CSS3을 사용하지 않고 IE8을 사용하고 있습니다.

Answer 1

margin: 0 auto 절대 배치 요소에 대해서는 작동하지 않습니다. 당신이해야 할 일은 중간에서 절대적인 위치입니다. 당신은 그것을 50%남겨 두면서 이것을 달성합니다. 그런 다음 왼쪽 여백을 요소 너비의 음의 절반으로 조정했습니다.

#bottomTable {
 position: absolute;
 width: 700px;
 left: 50%;
 margin-left: -350px; /*Half the width of your element*/
}

이것은 부모의 한가운데를 중심으로

추신. 상위 용기 위치가 상대적으로 설정되어 있는지 확인하십시오.

http://jsfiddle.net/s7gmm/3/