Flex 컨테이너에서 `justify-content: center` 텍스트를 중앙에 배치하지 않는 이유는 무엇입니까?

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

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

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

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

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

예

<code class="css">.box {
  width: 100px;
  height: 100px;
  background-color: lightgreen;
  margin: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.with-align p {
  text-align: center;
}</code>

<code class="html"><div class="box">
  <p>some long text here</p>
</div>

<div class="box with-align">
  <p>some long text here</p>
</div></code>

위 내용은 Flex 컨테이너에서 `justify-content: center` 텍스트를 중앙에 배치하지 않는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!