HTML CSS | 엘레멘트 가운데 정렬하기 치트키

html을 작성할 때 css를 이용해서 가운데 정렬하는 방법은 꽤 다양하다. 어떻게 작성하던지 상관없이 의도한 대로 가운데 정렬이 된다면 뭐든 일단 큰 문제가 아니다. 그런데 한 div 안에 img와 같은 특정 엘레멘트만 가운데 정렬하고 싶은 경우가 있다.

 

 

 

 

언제까지 text-align 만 사용할 것인가?

그렇다. html을 작성할 때 text-align 은 텍스트 정렬할 때만 사용하지 않고 div 내의 모든 엘레멘트를 가운데 정렬할 때도 이용된다. 그런데 언제까 text-align 만 사용할 것인가? text-align을 사용해 가운데 정렬하기 위해 새로운 div를 만들고 있었다면 이번 글을 통해 치트키 하나를 무조건 기억해 두자.

디스블록마영오토

이제부터 "디스블록마영오토" 아마 zyngirok에서 최초로 사용하는 말일 듯 싶다. 다시 말해 아무도 이렇게 외우지 않고 그럴 필요도 없긴 하다. 그런데 이렇게 고민한 만큼 이 글을 읽은 모든 사람은 다시는 이 공식을 잊지 않길 바란다. 한 엘레멘트만 독단적으로 가운데 정렬하기 위해선 그 엘레멘트를 블록으로 디스플레이 속성을 바꿔준 후 마진을 0과 auto로 설정해 주면 된다.

display: block;
margin: 0 auto;

그래서 display block에서 디블록 마진 0과 auto에서 마영오토. 기억하자 '디스블록마영오토'. 이 것만 기억하면 가운데 정렬이 더 이상 두렵지 않다.