목차
vertical-align 예제 - new 이미지 수직 정렬 vertical-align 예제 - logo 이미지 수직 정렬 vertical-align 정의 vertical-align 구문 vertical-align 예제1 - 테이블 셀 안 텍스트 수직 정렬 vertical-align 예제2 - 테이블 셀 안 텍스트 수직 정렬
vertical-align 예제 - new 이미지 수직 정렬
<style>
h2 {color:silver;}
img {width:9px; height:9px}
img.a {vertical-align: baseline;}
img.b {vertical-align: text-top;}
img.c {vertical-align: text-bottom;}
img.d {vertical-align: sub;}
img.e {vertical-align: super;}
</style>
<h2>vertical-align: baseline (기본값)</h2>
<p>홈짱닷컴 <img class="a" src="https://homzzang.com/img/icon_new.gif"> Homzzang.com</p>
<hr>
<h2>vertical-align: text-top</h2>
<p>홈짱닷컴 <img class="b" src="https://homzzang.com/img/icon_new.gif"> Homzzang.com</p>
<hr>
<h2>vertical-align: text-bottom</h2>
<p>홈짱닷컴 <img class="c" src="https://homzzang.com/img/icon_new.gif"> Homzzang.com</p>
<hr>
<h2>vertical-align: sub</h2>
<p>홈짱닷컴 <img class="d" src="https://homzzang.com/img/icon_new.gif"> Homzzang.com</p>
<hr>
<h2>vertical-align: sup</h2>
<p>홈짱닷컴 <img class="e" src="https://homzzang.com/img/icon_new.gif"> Homzzang.com</p>
결과보기
vertical-align 예제 - logo 이미지 수직 정렬
<style>
.box {
height: 150px;
border: 1px solid red;
text-align: center;
vertical-align:top;
}
img {width:200px; height:auto;}
img.baseline {vertical-align: baseline;}
img.top {vertical-align: top;}
img.middle {vertical-align: middle;}
img.bottom {vertical-align: bottom;}
img.plus {vertical-align: 40px;}
img.minus {vertical-align: -40px;}
img.pluspro {vertical-align: 40%;}
img.minuspro {vertical-align: -40%;}
img.sub {vertical-align: sub;}
img.super {vertical-align: super;}
img.text-top {vertical-align: text-top;}
img.text-bottom {vertical-align: text-bottom;}
img.initial {vertical-align: initial;}
img.inherit {vertical-align: inherit;}
</style>
<div class="box">
<img src="https://i.imgur.com/WfW5mBC.png"
class="baseline ">
baseline : Homzzang.com
</div>
<div class="box">
<img src="https://i.imgur.com/WfW5mBC.png"
class="top ">
top : Homzzang.com
</div>
<div class="box">
<img src="https://i.imgur.com/WfW5mBC.png"
class="middle ">
middle : Homzzang.com
</div>
<div class="box">
<img src="https://i.imgur.com/WfW5mBC.png"
class="bottom ">
bottom : Homzzang.com
</div>
<div class="box">
<img src="https://i.imgur.com/WfW5mBC.png"
class="plus ">
plus : Homzzang.com
</div>
<div class="box">
<img src="https://i.imgur.com/WfW5mBC.png"
class="minus ">
minus : Homzzang.com
</div>
<div class="box">
<img src="https://i.imgur.com/WfW5mBC.png"
class="pluspro ">
pluspro : Homzzang.com
</div>
<div class="box">
<img src="https://i.imgur.com/WfW5mBC.png"
class="minuspro ">
minuspro : Homzzang.com
</div>
<div class="box">
<img src="https://i.imgur.com/WfW5mBC.png"
class="sub ">
sub : Homzzang.com
</div>
<div class="box">
<img src="https://i.imgur.com/WfW5mBC.png"
class="super ">
super : Homzzang.com
</div>
<div class="box">
<img src="https://i.imgur.com/WfW5mBC.png"
class="text-top ">
text-top : Homzzang.com
</div>
<div class="box">
<img src="https://i.imgur.com/WfW5mBC.png"
class="text-bottom ">
text-bottom : Homzzang.com
</div>
<div class="box">
<img src="https://i.imgur.com/WfW5mBC.png"
class="initial ">
initial : Homzzang.com
</div>
<div class="box">
<img src="https://i.imgur.com/WfW5mBC.png"
class="inherit ">
inherit : Homzzang.com
</div>
결과보기
vertical-align 정의
2가지 용도로 사용.
용도1.
요소를 이것이 포함된 line box 내부에서 수직 정렬할 때 사용.
용도2.
table의 한 셀에서 포함하고 있는 내용을 수직 정렬할 때 사용.
1.
기본값:
상속여부: X
애니여부: O
CSS버전: CSS1
JS 구문: object .style. verticalAlign =" top "
2.
display: table-cell; 속성과 함께 사용해야 수직정렬 효과 나타남. (즉 요소의 범위를 테이블처럼 지정해야 됨.)vertical-align:속성값; display:table-cell 속성 주면 margin 속성이 작동 안 함. (이 경우엔, div 등 블럭요소 부모로 감싼 후, 그 부모요소에 margin 값 주면 됨. )
3.
모든 주요 브라우저 지원 .
4.
MDN vertical-align 예제보기
https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align
vertical-align 구문
[속성값]
baseline
부모요소의 기준선에 정렬. (기본값)
top 라인에서 가장 키 큰 요소의 상단에 정렬.
middle
부모요소의 중단에 정렬.
bottom 라인에서 가장 키 작은 요소에 맞춰 정렬.
length
해당요소 하단라인 기준에서 지정 길이만큼 텍스트를 올리거나 내림.
양수 : 해당요소 하단라인 기준해서 텍스트를 내려, 상대적으로 해당요소를 높게 위치시킴.음수 : 해당요소 하단라인 기준해서 텍스트를 올려, 상대적으로 해당요소를 낮게 위치시킴.
양수 : 해당요소 하단라인 기준해서 텍스트를 내려, 상대적으로 해당요소를 높게 위치시킴.음수 : 해당요소 하단라인 기준해서 텍스트를 올려, 상대적으로 해당요소를 낮게 위치시킴.
text-top 부모요소 폰트의 상단라인에 정렬.
text-bottom
부모요소 폰트의 하단라인에 정렬.
initial
이 속성의 기본값으로 설정.
inherit
부모요소의 속성값 상속.
cf. letter-spacing 속성: 글자 한자 한자간의 간격
vertical-align 예제1 - 테이블 셀 안 텍스트 수직 정렬
<style>
div {
text-align:center;
border:1px solid red;
width:300px;
height:100px;
}
.top {display: table-cell; vertical-align: top; clear:both;}
.middle {display: table-cell; vertical-align: middle; clear:both;}
.bottom {display: table-cell; vertical-align: bottom; clear:both;}
.no_top {vertical-align: top;}
.no_middle {vertical-align: middle;}
.no_bottom {vertical-align: bottom;}
</style>
<div class="top">top 홈짱닷컴 (homzzang.com)</div>
<div class="middle">middle 홈짱닷컴 (homzzang.com)</div>
<div class="bottom">bottom 홈짱닷컴 (homzzang.com)</div>
<div class="no_top">top 홈짱닷컴 (homzzang.com)</div>
<div class="no_middle">middle 홈짱닷컴 (homzzang.com)</div>
<div class="no_bottom">bottom 홈짱닷컴 (homzzang.com)</div>
결과보기
[ 참고 ]
div 요소에 준 display:table-cell 제거하면, 수직정렬 효과 반영 안 됨. display:table-cell 속성 준 경우, clear:both 속성이 안 먹힘. ㅡㅡ;;; 좌우정렬 위해 float 속성이나 positon 속성 줄 경우, 수직중앙정렬 X 수직정렬효과를 준 채 좌우정렬 위해서는 div로 한번 더 감싼 후 이 div에 적용. ( 이 때 주의할 점은, 감싼 div에 반드시 width 값 주고 margin:0 auto 줘야 함.)
vertical-align 예제2 - 테이블 셀 안 텍스트 수직 정렬
<style>
div {
background-color: yellow;
width: 100px;
aspect-ratio : 3/2;
display: table;
}
div span {
display: table-cell;
vertical-align: middle;
text-align: center;
background:tomato;
}
</style>
<div><span>홈짱닷컴</span></div>
결과보기
