text-align : center

inline 요소가 정렬되는 방식.

정렬을 시킬 경우, 부모 block 요소를 가진 부분에 적용하면 된다.

 

Q. inline요소에 직접 text-align:center을 할때 적용이 안되는 이유?

inline 요소는 그 content의 넓이만큼 공간을 차지한다.

ex: <span>, <a>

 

그래서 그 inline 요소에 직접 text-align: center를 한다면 딱 그 요소의 넓이만큼만 공간을 차지하고 있으니 거기다가 text-align을 해도 움직일 공간이 없다.

 

그래서 부모 block요소에 적용을 하게 된다.

 

ex1: block 요소인 h1 태그에 text-align: center를 적용한 경우

See the Pen Untitled by 오예림 Ria Oh (@riaoh) on CodePen.

 

 

 

ex2: inline 요소인 span 태그에 text-align: center를 적용한 경우

See the Pen Untitled by 오예림 Ria Oh (@riaoh) on CodePen.

 

 

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