[CSS] display / inline-block 가운데 정렬에 대해 알아보자 ✍️

👨‍💻 float:left 속성으로 아무리 가운데 정렬을 하려고 노력해봤지만, 

카드 요소들의 가로 정렬을 위해 float:left 속성을 사용했다. 가로 정렬은 성공(?) 했지만 가운데 정렬을 하지 못했다.

text-align: center; / margin:0 auto; 를 사용해도 도저히 안되는 가운데 정렬

 

원인은 바로 float:left 속성 때문이었다. 

.travel-card {
    float: left;
}

 

카드 요소 class 선택자("travel-card") 로 묶어 float: left; 사용 시 결과 화면이다.

요소들이 브라우저의 왼쪽부터 가로 정렬로 나열된다.

하지만 내가 원하는 것은 가운데 정렬을 같이 하는 것이었다.

 

👨‍💻 display: inline-block; 을 사용한 가운데 정렬

.travel-card {
    display: inline-block;
}

 

아래는 적용 결과 화면이다.

 

이와 같은 결과가 나오는 이유는 부모 태그에서 text-align: center 을 지정해두고,inline-block을 설정해서 컨텐츠가 글자로 인식되어 자동 정렬이 되는 것이다.

        body {
            text-align: center;
        }

 

💡  text-align: center 을 지정해두지 않으면 가운데 정렬이 적용되지 않으니 주의하자 !