개발자의 개발 블로그

div는 블록 엘리먼트이다.

div안에 있는, div를 움직이려고 한다.

<div id="big"> 

<div id="small">HI</div> 

</div>

#big { width:500px; height:500px; background-color:#ffff00; }

#small { width:50px; height:50px; background-color:#ff0000; }

이렇게 하면, 다음과 같이 나온다.

이렇게 나온다.

여기서, 빨간색 박스를 정중앙으로 이동하고 싶다면?

일단, 가로 중앙으로 이동하는 방법은

1. margin: 0 auto

이렇게 해서, 

상 우 하 좌   순서를 0 auto 0 auto 로, 즉, 상하의 마진을 0으로, 그리고 우좌의 마진을 auto로 하게 되면,

양 쪽에 자동(auto)으로 알맞게 margin이 적용되면서 가운데 정렬이 된다. 

2. text-align:center; 

참고로, text-align 속성은 텍스트의 정렬 방향을 의미한다.

속성값으로

left: 왼쪽 정렬

right: 오른쪽 정렬

center: 중앙 정렬

justify: 양쪽 정렬 (자동 줄바꿈시 오른쪽 경계선 부분 정리)

이렇게 하면... 안 된다. 왜냐하면 ,text-align은 블록 엘리먼트 안에 들어있는 inline 요소들을 정렬하는 명령어이다.

하지만, 위 같은 경우 HI 박스도 같은 블록 엘리먼트인 div이므로 이동하지 않는다.

그래서, 블록을  inline 엘리먼트와 같이 보이도록 변경을 해줘야하는데, 이것이 바로 

display: inline-block이다.

이것을 small에 집어넣으면, inline으로 표현되기 때문에, 

big에 들어있는 text-align에 의해 가로 기준 중앙으로 이동한다.

주의할 점은  display: inline으로 하면 안된다는 것이다.

이렇게 하게 되면, small이 가진 블록만의 너비와 높이뿐만 아니라 마진 적용을 할 수 없으며, 내용물만 블록이 된다.

사진을 보면 다음과 같다.

위 두 가지 방법 중 하나를 사용하면, 가로 정렬이 완성된다. 

그렇다면 세로 정렬은 어떻게 해야할까?

1. 노란색 big div에서 display: table-cell; 으로 표의 셀처럼 설정한 뒤, vertical-align: middle; 으로 작성하면 된다.

이렇게 하면, 세로 정렬이 된다.