CSS - 가상요소를 사용한 수직 가운데 정렬

[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:

참고:

떠나시기 전에 아무 댓글(Comments)이라도 남겨두세요.
기부를 통해 이 블로그의 운영을 후원하실 수 있습니다.