[css] inline-block 요소를 수평 가운데에 정렬하려면?

만약 inline-block 요소를 수평 가운데에 위치하게 하려면 어떻게 해야할까요? 우선 inline-block 요소의 특성에 대해서 살펴볼 필요가 있습니다. display 방식은 block, inline, inline-block 으로 나눌 수 있습니다. inline-block 요소는 inline 요소에 높이, 너비를 부여할 수 있게 해주는 display 방식입니다. 참고로 inline 요소에는 높이, 너비를 부여할 수 없습니다. 그냥 글자(또는 다른 내부 요소) 크기에 따라 저절로 높이, 너비가 결정됩니다.  

 

inline-block 요소를 수평 가운데에 정렬시키기 위한 방법

우선 다음과 같은 inline-block 요소가 있다고 가정하겠습니다.

 

<div style="display:inline-block; background-color: yellow; width: 200px; height: 200px;">
    인라인블럭
</div>

 

 

이제 이 친구를 웹 페이지 수평 가운데에 위치하게 해보겠습니다. 

 

부모 요소에 text-align: center를 적용하면 됩니다. 부모 요소가 딱히 없는 상황이기 때문에 다음과 같이 div 태그를 감싸줘서 부모 div 요소를 만들고, 그 부모 div 요소에 text-align: center를 적용하겠습니다. 

 

<div style="text-align:center;">
    <div style="display:inline-block; background-color: yellow; width: 200px; height: 200px;">
        인라인블럭
    </div>
</div>

 

 

이렇게 해주니 해당 inline-block이 수평 가운데에 배치된 것을 확인하실 수 있습니다. 

 

관련 글

- [css] div 요소 화면 정중앙에 배치하기, flex boc 활용

- css로 이미지 가운데 정렬하는 두가지 방법