justify-content가 있는 중심이 아닌 텍스트: center

플렉스 컨테이너에서 justify-content 속성은 항목을 수평으로 가운데에 배치하지만 해당 항목 내의 텍스트를 직접 제어할 수는 없습니다. 텍스트가 항목 내에서 래핑되면 기본 text-align: start 값이 유지되어 텍스트가 중앙에 위치하지 않게 됩니다.

Flex 컨테이너, Flex 항목 및 텍스트는 HTML 구조에서 세 가지 고유한 수준을 나타냅니다. justify-content는 flex 항목에 포함된 텍스트가 아닌 flex 항목에 영향을 미칩니다.

flex 항목이 컨테이너의 너비를 채우면 중앙에 배치할 수 없으므로 래핑 시 텍스트가 잘못 정렬됩니다.

텍스트를 직접 중앙에 배치하고 상속을 통해 플렉스 항목이나 컨테이너에 text-align: center를 할당합니다.

예

.box {
  width: 100px;
  height: 100px;
  background-color: lightgreen;
  margin: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.with-align p {
  text-align: center;
}

  
some long text here



  
some long text here