<세로 가운데 정렬은 inline 혹은 inline-block 요소에 vertical-align: middle을 주어서 설정한다>
1. 부모요소의 높이값이 있을 경우
가운데 정렬할 요소의 부모 요소에 line-height 값을 주고 vertical-align: middle을 한다.
* line-height 속성은 자식들에게 상속되기 때문에 가운데 정렬된 요소에게는 line-height: normal을 해 주어야 한다.
2. 가짜(helper) 요소 더하기
<head>
<style>
.container {
width: 300px;
height: 400px;
background-color: gray;
text-align: center;
}
.helper {
display: inline-block;
height: 100%;
vertical-align: middle;
}
.info {
background-color: lime;
display: inline-block;
vertical-align: middle;
width: 100%;
}
</style>
</head>
<body>
<div class="container">
<div class="helper"></div><div class="info">
<h1>Hello!</h1>
<p>My name is young.</p>
</div>
</div>
</body>
'HTML + CSS' 카테고리의 다른 글
| [HTML + CSS] 마진 상쇄 혹은 마진 겹침 (Margin Collapsing) 해결 (0) | 2019.05.10 |
|---|---|
| [HTML + CSS] POSITIONING(포지셔닝) (0) | 2019.04.26 |
| [HTML + CSS] Baseline(베이스라인) (0) | 2019.04.10 |
| [HTML + CSS] img 태그에 대하여... (0) | 2019.04.09 |
| [HTML + CSS] img를 포함한 여러 요소 함께 링크 (0) | 2019.04.08 |
