텍스트를 수직으로 정렬하는 속성으로 vertiacl-align 를 사용합니다. block 요소가 아닌 inline 이나 inline-block 에서만 가능합니다. 왜냐하면 vertiacl-align 은 행 방향으로 나열된 요소들의 수직 정렬 옵션이기 때문입니다. 그래서 줄 바꿈이 있는 <div> 에서는 안됩니다. 예제는 표에서 적용하는 방법, 문단 내에 이미지가 있을 때 정렬하는 방법 등 여러가지가 있으며 샘플 소스를 통해서 어떻게 적용되는지 살펴 보도록 하겠습니다.
vertical-align 속성의 값들은 다음과 같습니다.
l base : 기본값으로 부모 요소의 baseline 에 맞춥니다.
l sub : 아래첨자에 기준을 맞춰서 정렬합니다.
l super : 위첨자 기준으로 맞춰서 정렬합니다.
l text-top : 요소 상단을 부모 font 의 상단에 맞춥니다.
l text-botom : 요소 하단을 부모 font 의 하단에 맞춥니다.
l middle : 부모 요소의 중앙으로 맞춥니다.
l top : 부모 요소의 상단으로 맞춥니다.
l bottom : 부모 요소의 하단으로 맞춥니다.
l 길이값 : 0px 는 baseline 과 같은 값입니다. 0px 을 기준으로 길이값을 통해 위와 아래로 위치를 조절할 수 있습니다. 마이너스는 baseline 아래로 내려갑니다.
l % : 0% 는 baseline 과 같은 값입니다. 길이값과 마찬가지로 0 을 기준으로 아래 위로 위치를 조절할 수 있습니다.
| ◎ 텍스트로 이루어진 문단의 기본 수직 정렬 방법 |
▼ 부모 요소에 포함된 텍스트와 자식으로 들어간 span 태그의 정렬을 위해서 각 속성값을 적용해 보았습니다.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="euc-kr">
<title>CSS</title>
<style type="text/css">
body {
background-color: #e7e7e7;
}
p {font-size: 20pt;}
span {color: red; font-size: 12pt;}
#ver1 {vertical-align: base;}
#ver2 {vertical-align: sub;}
#ver3 {vertical-align: super;}
#ver4 {vertical-align: text-top;}
#ver5 {vertical-align: text-bottom;}
#ver6 {vertical-align: top;}
#ver7 {vertical-align: middle;}
#ver8 {vertical-align: bottom;}
#ver9 {vertical-align: 50%;}
#ver10 {vertical-align: 10pt;}
</style>
</head>
<body>
<p>parent text : <span id="ver1">vertiacl-align: base</span></p>
<p>parent text : <span id="ver2">vertiacl-align: sub</span> </p>
<p>parent text : <span id="ver3">vertiacl-align: super</span> </p>
<p>parent text : <span id="ver4">vertiacl-align: text-top</span> </p>
<p>parent text : <span id="ver5">vertiacl-align: text-bottom</span> </p>
<p>parent text : <span id="ver6">vertiacl-align: top</span></p>
<p>parent text : <span id="ver7">vertiacl-align: middle</span> </p>
<p>parent text : <span id="ver8">vertiacl-align: bottom</span> </p>
<p>parent text : <span id="ver9">vertiacl-align: 30%</span> </p>
<p>parent text : <span id="ver10">vertiacl-align: 20pt</span> </p>
</body>
</html>
| ※ 아래는 참고하면 좋을 만한 글들의 링크를 모아둔 것입니다. ※ ▶ 스타일 시트 CSS 가장 기본적인 내용과 스타일을 삽입하는 여러가지 방법 ▶ 스타일 시트 CSS 여러 스타일을 동시 적용하거나 특정 태그에 적용하기 ▶ 스타일 시트 CSS width 와 height 속성 사용법 ▶ HTML5 와 CSS 이용해 페이지 레이아웃 만드는 방법 ▶ 스타일 시트 CSS 텍스트, 글자 크기를 조절하는 font-size 사용하기 |
| ◎ div 에 display 속성을 적용해서 수직으로 정렬하기 |
▼ vertical-align 은 요소들 간의 수직 정렬을 조절하는 옵션입니다. block 요소에는 적용이 되지 않고 inline 요소에만 가능합니다. <span> 태그가 아닌 <div> 요소에서 적용하려면 display : table-cell 을 적용해서 inline 요소로 변경해야 합니다. <div> 요소가 줄 바꿈이 되지 않고 옆으로 정렬된 것은 inline 요소로 바뀐 것입니다.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="euc-kr">
<title>CSS</title>
<style type="text/css">
body {
background-color: #e7e7e7;
}
div {
width: 300px;
height: 100px;
border: 1px solid;
border-color: black;
color: white;
background-color: #4e539a;
display: table-cell;
}
#text1 {vertical-align: top;}
#text2 {vertical-align: top;}
#text3 {vertical-align: middle;}
#text4 {vertical-align: bottom;}
</style>
</head>
<body>
<div id="text1">vertiacl-align 정렬 : top</div>
<div id="text2"><p>vertiacl-align 정렬 : top</p></div>
<div id="text3"><p>vertiacl-align 정렬 : top</p></div>
<div id="text4"><p>vertiacl-align 정렬 : top</p></div>
</body>
</html>
| ◎ 이미지가 포함되어 있는 문자열의 정렬 방법 |
▼ 부모 요소에 있는 텍스트와 이미지간의 정렬 샘플입니다. 문단에 이미지가 포함된 경우 가독성을 위해서 vertical-align 옵션을 자주 사용하게 됩니다.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="euc-kr">
<title>CSS</title>
<style type="text/css">
body {
background-color: #e7e7e7;
}
img {
width: 30pt;
border-color: black;
border-width: 1px;
border-style: solid;
}
#ver1 {vertical-align: base;}
#ver2 {vertical-align: sub;}
#ver3 {vertical-align: super;}
#ver4 {vertical-align: text-top;}
#ver5 {vertical-align: text-bottom;}
#ver6 {vertical-align: top;}
#ver7 {vertical-align: middle;}
#ver8 {vertical-align: bottom;}
#ver9 {vertical-align: 50%;}
#ver10 {vertical-align: 10pt;}
</style>
</head>
<body>
<p>parent text : <img id="ver1" src="butterfly.ico"> base</p>
<p>parent text : <img id="ver2" src="butterfly.ico"> sub</p>
<p>parent text : <img id="ver3" src="butterfly.ico"> super</p>
<p>parent text : <img id="ver4" src="butterfly.ico"> text-top</p>
<p>parent text : <img id="ver5" src="butterfly.ico"> text-bottom</p>
<p>parent text : <img id="ver6" src="butterfly.ico"> top</p>
<p>parent text : <img id="ver7" src="butterfly.ico"> middle</p>
<p>parent text : <img id="ver8" src="butterfly.ico"> bottom</p>
<p>parent text : <img id="ver9" src="butterfly.ico"> 50%</p>
<p>parent text : <img id="ver10" src="butterfly.ico"> 10pt</p>
</body>
</html>
| ※ 아래는 참고하면 좋을 만한 글들의 링크를 모아둔 것입니다. ※ ▶ 스타일 시트 CSS 가장 기본적인 내용과 스타일을 삽입하는 여러가지 방법 ▶ 스타일 시트 CSS 여러 스타일을 동시 적용하거나 특정 태그에 적용하기 ▶ 스타일 시트 CSS width 와 height 속성 사용법 ▶ HTML5 와 CSS 이용해 페이지 레이아웃 만드는 방법 ▶ 스타일 시트 CSS 텍스트, 글자 크기를 조절하는 font-size 사용하기 |
'웹 프로그래밍 > 스타일시트 CSS' 카테고리의 다른 글
| HTML img 태그 CSS vertical-align 속성으로 이미지 수직 정렬 (0) | 2024.04.16 |
|---|---|
| 스타일 시트 CSS 브라우저 내 위치를 지정하는 left, right, top, bottom 속성 (0) | 2024.02.18 |
| 스타일 시트 CSS 가상 선택자 after 사용하는 방법 (0) | 2023.03.18 |
| 스타일 시트 CSS 접두어 webkit, moz, ms, o 의미 (2) | 2022.12.19 |
| 스타일 시트 CSS 여러 태그에 스타일을 동시 적용하거나 특정 태그에 적용하는 방법 (1) | 2020.01.18 |
| 스타일 시트 CSS width 와 height 속성 사용법 (0) | 2020.01.17 |
| 스타일시트 CSS 마우스오브(Mouseover) 이미지 테두리 적용 (0) | 2020.01.16 |
| 스타일 시트 CSS 가장 기본적인 내용과 스타일을 삽입하는 여러가지 방법 (1) | 2020.01.12 |
