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

 

환경: Eclipse Mars

 

텍스트를 정렬하는 속성 중 수직 정렬을 적용할 수 있는 vertiacl-align 이 있습니다. block 요소가 아닌 inline 이나 inline-block 에서만 가능합니다. 왜냐하면 행 방향으로 나열된 요소들의 수직 정렬 옵션이기 때문입니다. 그래서 줄 바꿈이 있는 <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 속성, inline 요소끼리 수직 정렬 옵션

 

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 속성, 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 속성, inline 요소끼리 수직 정렬 옵션



저작자 표시 비영리 변경 금지
신고
Posted by 녹두장군