vertical-align은 오로지 inline과 table-cell 엘리먼트에만 적용된다.
block level 엘리먼트에는 사용할 수 없다.
line-height
vertical-align: baseline;
vertical-align:top;
vertical-align:middle;
vertical-align:bottom;
vertical-align:sub;
vertical-align:super;
vertical-align
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>vertical-align</title>
<style>
/* body{font-size:30px;} */
span{background-color: lightcoral;}
img{width: 50px; height:50px; border:1px solid lightcoral;}
img.base{vertical-align: baseline;}
img.top {vertical-align: top;}
img.middle {vertical-align: middle;}
img.bottom {vertical-align: bottom;}
img.sub {vertical-align: sub;}
img.super {vertical-align: super;}
</style>
</head>
<body>
<h1>The vertical-align Property</h1>
<p>
vertical-align은 오로지 inline과 table-cell 엘리먼트에만 적용된다.
block level 엘리먼트에는 사용할 수 없다.
<!-- 글자 기준 사진 vertical이 달라짐 -->
</p>
<h2>vertical-align: baseline (default):</h2>
<span>image with a default alignment.</span>
<p>
<img class="base" src="../../img/img_girl.jpg" width="200" height="200"><span>image with a default alignment</span>
</p>
<h2>vertical-align: top:</h2>
<span>image with a top alignment.</span>
<p>
<img class="top" src="../../img/img_girl.jpg" width="200" height="200"><span>image with a default alignment</span>
</p>
<h2>vertical-align: middle:</h2>
<span>image with a middle alignment.</span>
<p>
<img class="middle" src="../../img/img_girl.jpg" width="200" height="200"><span>image with a middle alignment</span>
</p>
<h2>vertical-align: bottom:</h2>
<span>image with a bottom alignment.</span>
<p>
<img class="bottom" src="../../img/img_girl.jpg" width="200" height="200"><span>image with a bottom alignment</span>
</p>
<h2>vertical-align: sub:</h2>
<span>image with a sub alignment.</span>
<p>
<img class="sub" src="../../img/img_girl.jpg" width="200" height="200"><span>image with a sub alignment</span>
</p>
<h2>vertical-align: super:</h2>
<span>image with a super alignment.</span>
<p>
<img class="super" src="../../img/img_girl.jpg" width="200" height="200"><span>image with a super alignment</span>
</p>
</body>
</html>
