
헐..., 천잰데?
태그 : 청소년흡연해결책
<body>의 바로 하위에 오는 <div> 하나의 넓이를 1000px 주고 중앙정렬을 하려고 다음과 같이 스타일을 지정했습니다.
body {
text-align: center;
}
#wrap {
width: 1000px;
text-align: justify;
border: 1px solid yellow;
}
IE에서는 중앙정렬이 잘 되는데...그런데 어째선지 크롬이나 파폭에서는 중앙 정렬이 안 되요!
요리 보고 저리 봐도 모르겠어서 방탄웹 책을 꺼내들었습니다. 특별한 설명은 안 보입니다만, 일단 예제를 가지고 조금이 이리 붙이고 저리 붙여가며 방법을 찾아봤습니다. 결론은 <body>에 'text-align: center;'를 지정해봐야 <div> 박스가 정렬이 되지는 않는 듯하단 거였습니다.
그리고 정렬시켜주는 녀석은 의외의 녀석이었습니다.
#wrap {
width: 1000px;
margin: 0 auto;
text-align: justify;
border: 1px solid yellow;
}
'margin: 0 auto;' 부분의 의미는, 위아래는 0으로, 좌우는 동일하게 마진을 주겠다는 의미입니다. 좌우 마진이 동일하려면 자동으로 중앙정렬이 되어버리는 것이죠.
※참고 : [스크랩]컨텐츠 가운데 정렬 margin-left:auto, margin-right:auto
하지만 결국 <body>에 'text-align: center;'를 지정하면 IE에서는 중앙 정렬이 되는데 왜 다른 브라우저에서 안 되는 지에 대해서는 모르겠군요.
최근 덧글