div 화면 중앙 정렬 – 해상도에 상관없이 화면 중앙정렬

div 화면 중앙 정렬 – 해상도에 상관없이 화면 중앙정렬

div 화면 중앙 정렬에 관련 된 많은 자료들은 상당히 많이 있습니다.
오늘 소개할 소스는 간단하면서도 강력한 효과를 내주는 소스 인데요..

얼마전 사이트 제작중 div 를 사용해 전체 100% 화면에서 100px의 오른쪽에 정렬을 해야 하는 문제가 있었습니다.

스타일시트를 사용하고 여러가지 방법을 사용했는데 가장 쉽고 정확한 방법이 있어서 소개해드립니다.
소스는

    <div id=”aile” style=”Z-INDEX: 100; font-size:smaller; position:absolute; text-align: center;  width:100%; height:20px; right:0; margin-left:0px; margin-top:0px;”>
    <div id=”aile1″ style=”width:1000px; text-align: center;”>div 중앙정렬
</div>
</div>

입니다.

화면 중앙에 정렬을 할려면 사실 div id =”aile” 만 적용해도 가능 한데요 저 같은 경우는 해상도에 상관없이 화면 중앙을 100px로 잡아야 하기 때문에 div를 두개 사용했습니다.

위에서 보는거와 같은 id=”aile” 는 전체 화면 사이즈를 잡아주구요 id=”aile1″은 전체 화면에서 1000px을 잡아 줍니다. 어렵게 생각하면 어렵지만 참 간단한 방법 같아서 공유 하려 합니다..^^

만약 해상도에 상관없이 전체 화면에서 1000px을 중앙에 위치 하고 1000px에서 오른쪽에 위치 하려 한다면
div id = “aile1” 에서 text-align: center; 를 text-align:right;  으로 변경해주시면 됩니다.