블럭 레벨 엘레멘트는 너비(width)를 지정하지 않은 경우 가질 수 있는 모든 너비를 엘레멘트 영역으로 가지며, 엘레멘트 앞 뒤로 줄바꿈을 한다. 또한, 엘레멘트는 문서내 정상 흐름에 따라 위치되기 때문에 정렬을 시키기 위해서는 정렬 방법을 사용해야 한다. 엘레멘트의 텍스트 엘레멘트는 다음과 같은 방법으로 정렬을 시킨다.
text-align:right
rext-align:left
하지만, 레이아웃 목적을 위해 사용되는 블럭 엘레멘트의 수평 정렬 방식에 대해 알아보자. 블럭 엘레멘트는 <table>처럼 align 속성을 이용해 가운데로 정렬 시킬 수 없다. 또한 float 속성에 center값이 없기 때문에 블럭 엘레멘트를 수평 정렬시키기 위해서는 아래의 방법을 사용해야 한다.
■ 마진(margin) 속성의 "auto" 값을 사용하여 정렬
마진의 왼쪽과 오른쪽 값을 'auto'로 준 경우 왼쪽과 오른쪽의 마진이 똑같이 맞춰지면서 엘레멘트를 가운데로 정렬시켜 준다. 이 때 엘레멘트의 width값을 100%로 주면 안된다. 만약, width값이 100%일 경우 엘레멘트는 가운데로 정렬되지 않는다. 또한. 인터넷 익스플로러에서는 !DOCTYPE 선언을 반드시 해주어야 한다.
{
margin-left:auto;
margin-right:auto;
}
위의 방법은 ie에서 제대로 작동하지 않을 수 있기 때문에 text-align:center 속성을 가진 <div> 영역으로 해당 <div>태그를 감싸 사용한다.
{
text-align:center;
}
.center
{
margin-left:auto;
margin-right:auto;
width:70%;
text-align:left;
}
■ position 속성을 사용한 정렬
{
positin:absolute;
right:0px;
}
■ float 속성을 사용하여 왼쪽 또는 오른쪽으로 정렬하기
{
float:right;
}
'HTML& CSS > CSS' 카테고리의 다른 글
| 박스모델 - 테두리(border) 스타일 지정 (0) | 2009.10.16 |
|---|---|
| 박스모델 - 박스 모델(Box Model)이란 (0) | 2009.10.16 |
| 블럭 레벨 엘레멘트의 수직 정렬 (0) | 2009.10.16 |
| 인라인 블럭 레벨 엘레멘트의 특징 (0) | 2009.10.16 |
| 인라인 레벨 엘레멘트의 특성 (0) | 2009.10.16 |