• Q&A
  • 회원가입
  • 로그인

[text] CSS - vertical-align 속성 ★ - 텍스트수직정렬 (= vertical-align속성 = 버티컬얼라인속성)

목차
  1. vertical-align 예제 - new 이미지 수직 정렬
  2. vertical-align 예제 - logo 이미지 수직 정렬
  3. vertical-align 정의
  4. vertical-align 구문
  5. vertical-align 예제 - 테이블 셀 안 텍스트 수직 정렬

 

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 내부에서 수직 정렬할 때 사용.
(예: <img> 요소를 텍스트 요소의 라인 속에서 수직 정렬)

 

용도2.

table의 한 셀에서 포함하고 있는 내용을 수직 정렬할 때 사용.

 


 

1. 

  • 기본값: baseline
  • 상속여부: X
  • 애니여부: O
  • CSS버전: CSS1
  • JS 구문: object.style.verticalAlign="top"

 

2. 

display: table-cell; 속성과 함께 사용해야 수직정렬 효과 나타남. (즉 요소의 범위를 테이블처럼 지정해야 됨.)


3. 

vertical-align:속성값; display:table-cell 속성 주면 margin 속성이 작동 안 함. (이 경우엔, div 등 블럭요소 부모로 감싼 후, 그 부모요소에 margin 값 주면 됨. )

 

4.

모든 주요 브라우저 지원.

 

5.

MDN vertical-align 예제 보기

https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align

 

 

vertical-align 구문

 

selector {vertical-align: 속성값;}

 


[속성값]

 

baseline
부모요소의 기준선에 정렬. (기본값)


top
라인에서 가장 키 큰 요소의 상단에 정렬. 

middle
부모요소의 중단에 정렬.

bottom
라인에서 가장 키 작은 요소에 맞춰 정렬.


length
해당요소 하단라인 기준에서 지정 길이만큼 텍스트를 올리거나 내림.
양수: 해당요소 하단라인 기준해서 텍스트를 내려, 상대적으로 해당요소를 높게 위치시킴.
음수: 해당요소 하단라인 기준해서 텍스트를 올려, 상대적으로 해당요소를 낮게 위치시킴.
 
% 단위 (= 백분율 단위)
line-height 속성값의 지정 % 만큼 요소를 올리거나 내림.

양수: 해당요소 하단라인 기준해서 텍스트를 내려, 상대적으로 해당요소를 높게 위치시킴.
음수: 해당요소 하단라인 기준해서 텍스트를 올려, 상대적으로 해당요소를 낮게 위치시킴.


sub
부모요소의 하첨자라인에 정렬.
 
super
부모요소의 상첨자라인에 정렬.


text-top
부모요소 폰트의 상단라인에 정렬.
 
text-bottom
부모요소 폰트의 하단라인에 정렬.


initial
이 속성의 기본값으로 설정.
 
inherit
부모요소의 속성값 상속.

 

cf. letter-spacing 속성: 글자 한자 한자간의 간격

 

vertical-align 예제 - 테이블 셀 안 텍스트 수직 정렬

 
<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>
 
결과보기

[참고
 
1. 
div 요소에 준 display:table-cell 제거하면, 수직정렬 효과 반영 안 됨.
display:table-cell 속성 준 경우, clear:both 속성이 안 먹힘. ㅡㅡ;;;
 
2.
좌우정렬 위해 float 속성이나 positon 속성 줄 경우, 수직중앙정렬 안 됨. 
 
3.
수직정렬효과를 준 채 좌우정렬 위해서는 div로 한번 더 감싼 후 이 div에 적용.
이 때 주의할 점은, 감싼 div에 반드시 width 값 주고 margin:0 auto 줘야 함.
 

방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

찾아주셔서 감사합니다. Since 2012