가운데 정렬 (인라인요소)text-align:center; vs (블락요소) margin: 0 auto; 차이에 대해 알아보자.

https://www.codeit.kr/community/threads/10663

코딩이 처음이라면, 코드잇

예전에 다른 분 질문에 답글 단걸 조금 추가해서 쓰겠습니당

---

 

두 방식이 어떤 display 값일 때 쓸 수 있는지를 확인해보시면 좋을 것 같아용

 

1. inline 요소가 정렬이 되는 방식: text-align: center

이 정렬방법은 inline 요소가 정렬이 되는 방식입니당. 정렬을 하실 경우엔 부모 block 요소를 가진 부분에 적용을 해주시면 됩니당.

 

왜 inline 요소에 직접 text-align: center를 했을 때 적용되지 않을까 그 이유를 생각해보면,

inline 요소는 그 content의 넓이만큼만 공간을 차지하게 됩니당.

그러니 그 요소에 직접 text-align: center 를 한다면 이미 딱 그 요소의 넓이만큼만 공간을 차지하고

있으니 거기다가 text-align을 적용해도 움직일 공간이 없는 것이죵.

 

그래서 부모 block 요소에 적용을 하게 되는 것입니당. block 요소는 기본적으로 한줄을 다 차지하려고 하니까요^^

그러면 그 요소에 속한 inline 요소들이 정렬이 될 것입니다.

 

2. block 요소에 margin: 0 auto 를 이용한 정렬

이 정렬방법은 정렬대상이 block 요소일 때 쓸 수 있습니당. 그리고 이 block 요소의 width가

정해져있어야 합니당.

 

이미지 같은 경우엔 기본적으로 이미지마다 사이즈가 있으니 img 에 직접 적용할 수 있겠지만,

div 태그 같은 경우엔 width="165" 과 같이 고정된 값이 있어야 합니당.

 

그래야만 이 width를 제외한 나머지 공간을 margin 값이 똑같이 나눠가지면서 정렬이 되기 때문입니당

 

딱히 어느 경우에 쓰는게 좋다기 보다는 위 정렬방식에 따라 그때 그때 맞게 사용하시는게 좋지 않을까 생각합니당.

하나 살펴볼건 margin 을 이용한 정렬의 경우엔 아래와 같은 경우엔 사용하기가 번거로워 집니당

<div class="wrap">
    <img src="이미지1.jpg"><img src="이미지2.jpg">
</div>

이미지 두개가 나란히 있는채로 정렬을 하고 싶다고 하겠습니당.

이미지에 직접 block 요소를 이용한 정렬은 할 수가 없을 것입니당. 두 이미지가 나란히 있어야 하니까용

그럼 wrap 클래스에 margin: 0 auto 를 주는 방법을 생각해볼 수 있을 것입니당.

 

하지만 위에도 말씀드렸다시피 block 요소의 width가 정해져있어야 합니다.

wrap 클래스에 width를 주면 되겠지만, 정확하게 정렬을 하려면

이미지1, 이미지2의 size도 알아야 하고, 둘 사이에 margin 같은게 있다면그 margin 도 계산하여야 할 것입니당.

 

그래서 이런 경우엔 간단히 wrap 클래스에 text-align을 줘서 정렬하는게 편할 것입니당^^

더 따지자면 inline 요소끼리 생기는 여백 문제 등 따질게 많긴 합니다만 처음부터 다하면 머리가 아프니

이 정도로만 익혀두시고 진도를 나가시면서 하나하나 습득해보시는게 좋을 것 같아요^^

 

 

https://bit.ly/3c5uorT

[CSS] inline(텍스트) 요소 가운데 정렬