• 회원가입
  • 로그인
  • 구글아이디로 로그인

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

목차
  1. vertical-align 예제 - new 이미지 수직 정렬
  2. vertical-align 예제 - logo 이미지 수직 정렬
  3. vertical-align 정의
  4. vertical-align 구문
  5. vertical-align 예제1 - 테이블 셀 안 텍스트 수직 정렬
  6. 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 내부에서 수직 정렬할 때 사용.
(예: <img> 요소를 텍스트 요소의 라인 속에서 수직 정렬)

 

용도2.

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

 


 

1. 

  • 기본값: baseline
  • 상속여부: 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 구문

 

selector {vertical-align: 속성값;}

 


[속성값]

 

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


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

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

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


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


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


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>


결과보기


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

분류 제목
text CSS - color 속성 ★ - 글자색깔 (=글자색상=글자색깔=글자컬러 = 텍스트색깔 = 컬러속성 = co…
text CSS - direction 속성 - 텍스트방향 (= 텍스트진행방향 = direction속성 = 디렉션속성)…
text CSS - letter-spacing 속성 ★ - 글자 간격 사이사이 띄우기 ( 텍스트사이띄우기 = 문자 간…
text CSS - line-height 속성 ★ - 텍스트라인높이 (= line-height속성 = 텍스트줄높이 =…
text CSS - text-align 속성 ★ - 텍스트정렬 (= text-align속성 = 텍스트얼라인속성)
text CSS - text-decoration 속성 ★ - 텍스트라인 꾸미기 (= 밑줄/밑선, 가운데줄/취소선, 윗…
text CSS - text-indent 속성 ★★ - 단락 첫줄 텍스트 들여쓰기 (= text-indent속성 = …
text CSS - text-transform 속성 - 텍스트 대소문자변환 (= text-transform속성 = 텍…
text CSS - word-spacing 속성 ★ - 텍스트 단어간 간격 (= 단어간격 = word-spacing…
text CSS - vertical-align 속성 ★ - 텍스트수직정렬 (= vertical-align속성 = 버티…
text CSS - white-space 속성 ★ - 공백처리/줄바꿈 지정 (= white-space속성 / 화이트스…
text CSS - unicode-bidi 속성 - 텍스트글자방향 (= unicode-bidi속성 = 유니코드비디속성…
text CSS - text-align-last 속성 - 단락마지막라인정렬 (= text-align-last속성 = …
text CSS - text-emphasis 속성 - 텍스트 강조마크의 '모먕/색깔' 일괄 지정 (= 텍스트 글자 위…
text CSS - text-justify 속성 - 텍스트 좌우균분정렬 세부설정 (= text-justify속성 = …
text CSS - text-overflow 속성 ★ - 영역 이탈 글자 처리 (= text-overflow속성 = …
text CSS - word-break 속성 ★ - 한중일 외의 언어 (단어기준/글자기준) 줄바꿈규칙 지정 (= 줄…
text CSS - word-wrap 속성 ★ - 단어줄바꿈 위해 긴단어쪼개기 (= 긴단어깨기 = 긴단어나누기 = w…
text CSS - text-fill-color 속성 (비표준) - 텍스트글자색 (= 글자전경색 =text-fill-…
text CSS - text-decoration-line 속성 - 텍스트라인위치종류 (= text-decoration…
1/2
목록
찾아주셔서 감사합니다. Since 2012