Javascript & JQuery & CSS

텍스트를 정렬하는 속성 중 수직 정렬을 적용할 수 있는 vertiacl-align 이 있습니다.
 
block 요소가 아닌 inline 이나 inline-block 에서만 가능합니다.

왜냐하면 행 방향으로 나열된 요소들의 수직 정렬 옵션이기 때문입니다. 그래서 줄 바꿈이 있는  <div> 에서는 안됩니다.

예제는 표에서 적용하는 방법, 문단 내에 이미지가 있을 때 정렬하는 방법 등 여러가지가 있으며

샘플 소스를 통해서 어떻게 적용되는지 살펴 보도록 하겠습니다.

vertical-align 속성의 값들은 다음과 같습니다.
 

	base : 기본값으로 부모 요소의 baseline 에 맞춥니다. 
	sub : 아래첨자에 기준을 맞춰서 정렬합니다.  
	super : 위첨자 기준으로 맞춰서 정렬합니다. 
	text-top : 요소 상단을 부모 font 의 상단에 맞춥니다. 
	text-botom : 요소 하단을 부모 font 의 하단에 맞춥니다. 
	middle : 부모 요소의 중앙으로 맞춥니다. 
	top : 부모 요소의 상단으로 맞춥니다. 
	bottom : 부모 요소의 하단으로 맞춥니다. 
	길이값 : 0px 는 baseline 과 같은 값입니다. 0px 을 기준으로 길이값을 통해 위와 아래로 위치를 조절할 수 있습니다. 
	마이너스는 baseline 아래로 내려갑니다.
	% : 0% 는 baseline 과 같은 값입니다. 길이값과 마찬가지로 0 을 기준으로 아래 위로 위치를 조절할 수 있습니다.