부모 div에 `display: flex; justify-content: center; align-items: center;` 속성을 사용하면 자식 요소들을 수평 및 수직 중앙에 정렬할 수 있습니다. 이때 span 태그가 inline 속성을 가지더라도 정렬이 되는 이유는 flexbox 레이아웃 모델의 작동 원리 때문입니다.
`display: flex;`를 설정하면 부모 요소가 flex 컨테이너가 됩니다. Flex 컨테이너는 자식 요소들을 flex 아이템으로서 관리하며, `justify-content`와 `align-items` 속성을 사용하여 아이템들을 정렬할 수 있습니다.
- `justify-content`: 수평 방향 정렬을 조정합니다. `center`를 설정하면 아이템들이 수평 방향 가운데로 정렬됩니다.
- `align-items`: 수직 방향 정렬을 조정합니다. `center`를 설정하면 아이템들이 수직 방향 가운데로 정렬됩니다.
inline 속성을 가지는 요소들도 flex 컨테이너 내에서 flex 아이템으로 동작합니다. 따라서 span 태그도 flex 아이템이 되며, 부모 div의 설정에 따라 수평 및 수직 가운데로 정렬됩니다. inline 요소이더라도 flexbox 레이아웃에 따라 정렬되기 때문에 inline 속성에도 영향을 받습니다.
See the Pen Untitled by keepgoing-Noah (@keepgoing-noah) on CodePen.
728x90
300x250
