CSS를 사용하여 레이아웃을 가운데 정렬하는 방법
1. 방법 1
<html>
<head>
<style>
body {
text-align:center;
}
#box {
width:800px; /* 박스의 크기를 가로 800픽셀로 정함 */
margin:0 auto; /* 상하의 마진은 0이고 좌우는 자동으로 정함 */
border:1px solid #000; /* 박스의 테두리를 정함 */
text-align:left; /* 정렬방식을 다시 좌측으로 되돌림. */
}
</style>
</head>
<body>
<div id="box">
가운데 정렬할 박스 : 박스의 크기는 가로 800픽셀로 가정
</div>
</body>
</html>
오랜지색으로 표현된 부분은 explorer 버그로 인한 설정. 파이어 폭스의 경우에는 오랜지색 필요없음.
현재 익스플로러 사용자가 더 많은 관계로 반드시 필요함.
2. 방법 2
<html>
<head>
<style>
#box {
width:800px;
position:relative;
left:50%; /* 좌측에서 50%지점에서 박스의 처음을 시작함 */
margin-left:-400px; /* 좌측 마진을 박스의 시작점에서 -400px 만큼 뺌 */
}
</style>
</head>
<body>
<div id="box">
가운데 정렬할 박스
</div>
</body>
</html>
박스의 크기가 800px인 박스의 시작점을 좌측에서 50%인 지점에서 시작( 그렇다면 시작지점이 브라우저의 정중앙이 된다.) 시작지점에서 박스의 사이즈의 반인 400px 만큼 마이너스로 이동하므로 결국은 가운데 정렬이 된다. 쉽게 플러스는 오른쪽, 마이너스는 왼쪽이라 생각하면 된다.
만약 박스의 가로 사이즈가 700px 이라면 -350px가 되어야 한다.
즉, margin-left: -(width)/2; 라고 생각하면 된다.
'Web > Css' 카테고리의 다른 글
| SELECT 박스에서 테두리 변경하기 (0) | 2008.09.11 |
|---|---|
| 레이아웃 작성하기 (1단 레이아웃) (0) | 2007.12.22 |
| 앵커(anchor) 스타일 적용하기 (0) | 2007.12.01 |
| 박스 모델 (0) | 2007.11.14 |
| 스타일시트를 문서에 적용하는 법 (0) | 2007.11.14 |