CSS 스타일시트에서 margin vertical-align 속성에 관하여..
본문
<style type="text/css">
#title {float:left; width:180px; height:30px; margin:0 auto; text-align:center; vertical-align:middle; display:table-cell; background-color:red; }.banner { margin:30px 0 0 0; width:180px; text-align:center; clear:both;}
.banner span { width:180px; height:30px; cursor:pointer;background-color:#1e4e9d; color:white; font-family:arial; display:inline-block; border-radius:0px; border:0px solid; padding-top:12px;}
.banner span a { color:white; text-decoration:none;}
.banner span a:hover { color:yellow; text-decoration:none;}
</style>
<div id="title">
배너 모음
</div><div class="banner">
<span><a href='http://www.homzzang.com'>광고 배너 1</a></span>
<span><a href='http://www.homzzang.com'>광고 배너 2</a></span>
</div>
왜 위 붉은색의 margin 값과 하늘색의 vertical-align이 적용 안 되는 걸까요?
즉,
margin 상단 값을 아무리 많이 줘도 파란색과 빨간색이 떨어지지 않습니다. ㅜㅜ
또, 빨간색 안의 글자들을 수직으로 중앙에 위치시키고자 하는데 vertical-align이 적용이 안되네요.
원인은 무엇이며, 해결책은 어떻게 될까요?
답변 2
vertical-align이 아닌 line-height:30px을 사용해보세요
레스트 님, 좋은 팁 고맙습니다. line-height 공부했는데, 이럴 때 써먹는 거군요. ^^*
근데, margin 속성이 적용 안되는 이유는 알 수 없을까요?
어떤 부분에서 margin이 않된다는것인가요?
여러 시행착오 끝에 알아냈어요. ^^* 위 요소의 float:left 속성이 원인이였네요.
답변을 작성하시기 전에 로그인 해주세요.
