Please Enable JavaScript!
Gon[ Enable JavaScript ]

반응형

텍스트를 수직으로 정렬하는 속성으로 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 vertical-align 속성&#44; inline 요소끼리 수직 정렬 옵션

 

※ 아래는 참고하면 좋을 만한 글들의 링크를 모아둔 것입니다.
스타일 시트 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>

스타일 시트 CSS vertical-align 속성&#44; inline 요소끼리 수직 정렬 옵션

 

 

 

이미지가 포함되어 있는 문자열의 정렬 방법

 

 

부모 요소에 있는 텍스트와 이미지간의 정렬 샘플입니다. 문단에 이미지가 포함된 경우 가독성을 위해서 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 vertical-align 속성&#44; inline 요소끼리 수직 정렬 옵션

※ 아래는 참고하면 좋을 만한 글들의 링크를 모아둔 것입니다.
스타일 시트 CSS 가장 기본적인 내용과 스타일을 삽입하는 여러가지 방법
스타일 시트 CSS 여러 스타일을 동시 적용하거나 특정 태그에 적용하기
스타일 시트 CSS width 와 height 속성 사용법
HTML5 와 CSS 이용해 페이지 레이아웃 만드는 방법
타일 시트 CSS 텍스트, 글자 크기를 조절하는 font-size 사용하기
반응형
Posted by 녹두장군1
,