css에서 지정할 수 있는 정렬은 inline, block 요소인지에 따라 결정된다. 각각의 경우에 텍스트 요소를 정렬하는 방식을 알아보자.


text-align: center

텍스트 요소를 가운데로 정렬한다. 단, block 요소에는 적용되지 않는다.


블록요소의 가로 정렬은 어떻게 할까?

이 때는 width: 50%; 속성을 지정하여 단락을 너비를 부모 요소(페이지 레이아웃)의 절반으로 만들어주면 된다. margin: 0 auto; 속성은 단락너비가 퍼센트 이외의 수치값인 경우 auto 속성을 주어 사용한다. 또는 margin: 0 25%;는 단락너비가 퍼센트이므로 마진에 퍼센트를 사용할 수 있다.


vertical-align

관련 텍스트 행을 기준으로 인라인 요소를 정렬한다. 따라서 블록 요소인 divp에는 적용되지 않는다. 이 때는 display: inline; 속성을 적용해준다.

- 다른 인라인 요소에 상대적으로 정렬하므로 영향받는 값에 따라 모양이 달라질 수 있다.
	- **baseline** : 기본 속성이다. 적용되면 부모요소의 기준선에 맞춘다.
	- **top/middle/bottom** : 부모 요소기준으로 위/중앙/아래에 위치.
	- **text-top/bottom** : 요소의 맨 아래를 부모 font의 위/아래에 맞춘다.
	- **super** : 부모의 위첨자 기준에 맞춘다.
	- **sub** : 부모의 아래첨자 기준선에 맞춘다.
	<p><a href=#>한식</a></p>
	<p><a href=#>중식</a></p>
	<p><a href=#>일식</a></p>
p {
	float: left;
	vertical-align: middle;
}

Julia Hwang

디발자를 꿈꾸는 웹개발자의 블로그입니다.