[CSS] 가상 요소를 사용하여 inline-block 요소를 수직으로 가운데 정렬하기

가상요소(Pseudo Element)는 inline-block 요소로 행동하기 때문에 vertical-align: middle 규칙을 사용하여 다른 inline-block 요소(로그 등)를 가운데 정렬시킬 수 있습니다.  그리고 화면에서 양 요소를 맞추기 위해 마이너스 마진(margin) 값을 추가하도록 합니다.

예시:

HTML 샘플:

<div id="header">
<div id="logo">
<img src="http://abload.de/img/unbenannt-1bmq5b.png" alt=""/>
</div>
</div>

CSS 샘플:

#header{
width:100%;
height:4rem;
background:silver;
}

#header div{
display:inline-block;
vertical-align:middle;
height:100%;
}

#header #logo{
width:75%;
}

#header #logo:before{
content:' ';
display:inline-block;
vertical-align:middle;
height:100%;
margin-left: -4px;
}

#header #logo img{
max-width:100%;
vertical-align:middle;
}

그리고 DIV를 수직 정렬하는 또 다른 방법으로 이 글도 참고해보시기 바랍니다.

References:

참고:


댓글 남기기

* 이메일 주소는 공개되지 않습니다.