CSS 수평 정렬, 수직 정렬에 관해서 질문 좀 드릴게요.
본문
<style type="text/css">.outside {text-align: center; width: 100%; height:100px; background:#f8e1eb; padding:10px;}
.inside {margin: 0 auto; width: 300px; height:50px; vertical-align:middle; display:table-cell; border:1px solid; padding:10px 1;}</style>
<div class="outside">
<div class="inside">div 중앙 정렬 : 홈짱닷컴 (homzzang.com)</div>
</div>
위 소스에서 자식 테그에 수직 정렬 위해 굵은 글씨 소스를 넣으면 익스플로러에선 수평 중앙 정렬이 안됩니다.
(크롬, 파이어폭스에서 중앙 정렬 됨)
삭제 후, padding 값을 이용해 위치를 정할 수 있지만, 이 방법 말고 다른 방법은 없을까요?
div 태그가 부모 자식 구조로 되어 있을 때, 자식 태그를 수직 수평 상으로 정가운데 오게 하려면 어떻게 해야 할까요?
답변 1
그냥 간단하게 푸세요 ........
<style type="text/css">
.outside {width: 100%; height:100px; background:#f8e1eb; padding:10px;}
.inside {margin: 0 auto; width: 300px; height:50px;border:1px solid; padding:10px 1;}
.inside {margin: 0 auto; width: 300px; height:50px;border:1px solid; padding:10px 1;}
</style>
<div class="outside">
<center>
<div class="inside">div 중앙 정렬 : 홈짱닷컴 (homzzang.com)</div>
<div class="inside">div 중앙 정렬 : 홈짱닷컴 (homzzang.com)</div>
</center>
</div>
</div>
아무래도 위 굵은 색 소스를 넣은 상태서 중앙정렬 시키는 방법은 없나보군요. ㅜㅜ
답변 고맙습니다. 주말 잘 보내세요 !
답변을 작성하시기 전에 로그인 해주세요.