[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; }
- 데모: jsfiddle
그리고 DIV를 수직 정렬하는 또 다른 방법으로 이 글도 참고해보시기 바랍니다.
References:
- Image doesn't scale correctly (stackoverflow)
- Centering in the Unknown (요소를 정확히 알 수 없는 상황에서 가운데 정렬시키기)