text-align - text 정렬

See the Pen Untitled by Jeong-Dagyeong (@jeong-dagyeong) on CodePen.

p 태그는 block요소이기 때문에 가로길이에 맞추어서 text가 정렬된다. 

 

span 태그는 inline요소이기 때문에 내용물의 길이에 따라서 맞춰지기 때문에 text-align이 적용되지 않는다.

만약 span태그 안의 text 위치를 옮기고 싶으면 

.container {
  text-align: center;
}

div태그(block요소이기 때문)에 text-align을 적용하면 된다.