1. text-align: center
이 정렬방법은 inline 요소가 정렬이 되는 방식입니당. 정렬을 하실 경우엔 부모 block 요소를 가진 부분에 적용을 해주시면 됩니다.
span은 inline 요소입니다.
왜 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 을 이용한 정렬의 경우엔 아래와 같은 경우엔 사용하기가 번거로워 집니당
이미지 두개가 나란히 있는채로 정렬을 하고 싶다고 하겠습니당.
이미지에 직접 block 요소를 이용한 정렬은 할 수가 없을 것입니당. 두 이미지가 나란히 있어야 하니까용
그럼 wrap 클래스에 margin: 0 auto 를 주는 방법을 생각해볼 수 있을 것입니당.
하지만 위에도 말씀드렸다시피 block 요소의 width가 정해져있어야 합니다.
wrap 클래스에 width를 주면 되겠지만, 정확하게 정렬을 하려면
이미지1, 이미지2의 size도 알아야 하고, 둘 사이에 margin 같은게 있다면그 margin 도 계산하여야 할 것입니당.
그래서 이런 경우엔 간단히 wrap 클래스에 text-align을 줘서 정렬하는게 편할 것입니당^^
