vertical-align 속성은 수직 정렬을 지정하는 속성입니다. 수직 정렬을 해야하기 때문에 inline이나 inline-block 또는 table-cell 엘리먼트에만 적용됩니다. block에는 쓸 수 없다는 건 안 비밀~
먼저 간단하게 표를 이용해서 기준선을 옮겨 보겠습니다. 대표적인 기준선은 다음과 같습니다.
| baseline | 셀의 기준 선에 내용의 기준선을 맞춤 |
| top | 패딩의 위쪽에 내용의 기준선을 맞춤 |
| middle | 패딩의 중앙에 내용의 기준선을 맞춤 |
| bottom | 패딩의 아래쪽에 내용의 기준선을 맞춤 |
vertical-align의 기본값은 baseline입니다. baseline으로 해주면 부모의 기준선에 맞추어서 해당 엘리먼트의 기준선을 정렬해줍니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<table>
<tr>
<td class="test1">TEST</td>
<td class="test2">TEST</td>
<td class="test3">TEST</td>
<td class="test4">TEST</td>
</tr>
</table>
</body>
</html>
table, th, td { border: 1px solid black;}
table{ width: 500px; height: 200px;}
.test1 {vertical-align: baseline;}
.test2 {vertical-align: top;}
.test3 {vertical-align: middle;}
.test4 {vertical-align: bottom;}
이번에는 글자들끼리 vertical-align을 맞춰보도록 하겠습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="content">
기준
<span class="One">One</span>
<span class="Two">Two</span>
<span class="Three">Three</span>
<span class="Four">Four</span>
</div>
</body>
</html>
.content{
background-color:blanchedalmond;
}
.One {
font-size: 100px;
background-color:burlywood;
}
.Two {
font-size: 50px;
background-color: skyblue;
}
.Three {
font-size: 70px;
background-color: pink;
}
.Four {
font-size: 40px;
background-color: yellow;
}
1. Two 클래스에 vertical-align: top 주기
1. One 클래스는 아무 설정도 해주지 않아서 vertical-align이 기본값인 baseline입니다. 그래서 부모요소의 baseline 즉, 부모요소의 기준선과 같은 걸 확인할 수있습니다.
2. Two 클래스는 vertical-align: top인데요. 하늘색 박스가 이 줄에서 가장 높이가 높은 요소(One, 갈색박스) 위에 맞춰진걸 볼 수 있습니다.
2. One 클래스에 vertical-align: top 주기
1. One에 vertical-align: top을 주면 가장 높은 요소의 top에 기준선이 맞춰지게됩니다. One클래스를 제외하고 가장 높은 요소는 Three이니까 Three클래스와 기준선이 맞춰지겠죠?!
2. 그런데 Three가 올라가다보니까 baseline이 Three가 되게됩니다. 기준, Two, Four는 vertical-align이 딱히 정해진게 없잔아요.그래서 Three가 맞춰놓은 기준선에 맞춰지면서 다 올라가게 된겁니다.
3. 좀 헬갈리시죠? 여기서 제가 드리고 싶은 말은 baseline은 변한다는 것입니다. 모든 조건들을 충족시키면서 가장 높이를 낮게하기위해 변해요. 그렇기때문에 baseline이 고정됐다고 생각하고 간격을 맞추시면 헷갈리게 됩니다.