CSS Box align, content align

 레이아웃을 구성하면서 정렬의 사용 빈도가 높다.

정렬의 종류는 두 가지이다. 하나는 박스를 정렬하는 방법이고 다른 하나는 박스 안의 컨텐츠를 정렬하는 방법이다.

 

 박스를 화면 상에서 가운데 정렬하는 방법은 display 속성에 따라 다르다. 

block : width를 지정 후 margin: auto;

inline: 부모 태그에 text-align: center; 

inline-block : inline과 동일

 

 박스 내부의 컨텐츠를 정렬하는 방법은 display 속성에 따라 다르다.

block: text-align: center;

inline: 박스 자체를 정렬하는 방법을 이용

inline-block: text-align: center; 

 

 

정리하면

1.박스 자체 정렬

1.1. block인 경우 width 지정 후 마진 오토

1.2. inline과 inline-block은 부모 태그의 text-align: center

 

2.컨텐츠 정렬

2.1. block, inline-block은 text-align: center

2.2.inlne은 좌우 여유공간이 없기 때문에 inline 자체로는 불가