CSS - 가운데 정렬

블럭 태그를 가운데 정렬 하는 방법 margin : 0 auto;

 

블럭 태그에 text-align : center를 주면 그 내부에 있는 모든 인라인 요소가 가운데 정렬 된다. 이 속성은 상속 되는 속성이다.

블럭 태그 안의 모든 인라인 요소를 가운데 정렬 하고 싶을때는 text-align : center!

 

h1은 블럭태그이다. box 태그에 text-align : center를 줬기 때문에 h1도 이 속성을 상속 받았고 h1내부에 있는 글자도 그 속성을 상속 받아서 결과적으로 텍스트가 중앙정렬 되는 것이다. 절대로 h1태그 자체가 가운데 정렬 되는것이 아니다. 다음의 이미지를 보면 이해 할 수 있다.

보면 h1은 기본적으로 블락태그이기 때문에 한 행을 다 차지한다. 그런데, 텍스트는 가운데 정렬 되어 있다.(텍스트는 인라인 요소기 때문에 상속된 text-align : center 때문에 정렬 되는 것임!!)

 

그래서 h1 태그에 width를 주게 되면 위와 같이 변하게 된다.

그럼 h1태그 자체를 가운데 정렬 하고 싶으면? h1은 블럭태그이므로 margin 0 auto를 주면 되겠다!

 

h1의 width 값이 250으로 고정된 상황에서 텍스트의 크기를 늘리면 위와 같이 기이한 현상이 발생한다. 

 

 

 

 

 

 

 

 

출처 : https://programmers.co.kr/learn/courses/4521/lessons/14635