HTML DIV tag: 좌우정렬하기 ALIGN : left, center, right

DIV로 둘러싼 영역안에 있는 내용을 좌우로 정렬하는 속성은 Align[얼라인: 맞추다]이며, 왼쪽(left), 가운데(center), 오른쪽(right)을 지정해 주면 된다.

[왼쪽 정렬]

DIV 영역 안에서 가로로 왼쪽 정렬하기 샘플
<div align="left" style="border: 1px solid #48BAE4; height: 100px;">

이 영역안에 있는 글이나 그림등은 왼쪽으로 정렬된다. 속성인 Align은 Style 뒤에 놓아도 잘 작동은 하지만, 일반적으로 앞에 놓는 것 같다.

[가운데 정렬]

DIV 영역 안에서 가로로 가운데 정렬하기 샘플
<div align="center" style="border: 1px solid #48BAE4; height: 100px;">

이 영역안에 있는 글이나 그림등은 가운데로 정렬된다. 속성인 Align은 Style 뒤에 놓아도 잘 작동은 하지만, 일반적으로 앞에 놓는 것 같다.

[오른쪽 정렬]

DIV 영역 안에서 가로로 오른쪽 정렬하기 샘플
<div align="right" style="border: 1px solid #48BAE4; height: 100px;">

이 영역안에 있는 글이나 그림등은 왼쪽으로 정렬된다. 속성인 Align은 Style 뒤에 놓아도 잘 작동은 하지만, 일반적으로 앞에 놓는 것 같다. 

[세로정렬]

DIV 영역 안에서 세로로 정렬하기
<div vertical-align="middle" style="border: 1px solid #48BAE4; height: 100px;">

DIV 영역안의 내용을 세로로 정렬(위로, 가운데, 아래로)정렬하는 속성은 vertical-align이라고 나와 있지만, 실제로 적용해보면 작동하지 않는다. 따라서 세로정렬은 다른 방법을 사용할 수 밖에 없다.

세로정렬은 되지 않는다. 
>> DIV 영역을 세로로 가운데 또는 아래로 정렬하는 방법 설명 페이지 보기

>> DIV 영역을 세로 정렬 - 세로 가운데 정렬, 세로 아래쪽 정렬 방법
>> HTML 태그 사용법 목록: DIV P SPAN IMG A HR FONT BR ...