[css] align 속성 중앙 정렬 왼쪽 오른쪽 정렬

css의 align속성과  margin:auto를 이용하는 방법 소개해드립니다.

 

align 구조

.text1{align:left;} 	//왼쪽정렬
.text2{align:center;}	//중앙정렬
.text3{align:right;}	//오른쪽정렬

기본적으로 정렬을 할때 텍스트 정렬을 할때는 align을 사용 하신다고 생각하시면 됩니다.

 

HTML 부분

<div class="text_box">
	<p class="text1">1번 텍스트</p>
	<p class="text2">2번 텍스트</p>
	<p class="text3">3번 텍스트</p>
</div>

text_box 클래스를 가진 div 안에 텍스트 3문단을 넣어놓은 상태입니다.

 

CSS 부분

.text_box{width:300px;height:150px;border:1px solid #000;}
.text1{font-size:18px;text-align:left;}
.text2{font-size:18px;text-align:center;}
.text3{font-size:18px;text-align:right;}

결과

 

가로가 300px의 박스에 각각 왼쪽, 중앙, 오른쪽 정렬이 됨을 확인 할 수 있습니다.