콘텐츠가 컨테이너 너비를 초과할 때 Flex 컨테이너 내에서 텍스트를 가운데에 배치하려면 어떻게 해야 합니까?

Flex 컨테이너의 텍스트 정렬 문제

Flex 컨테이너(display: flex)를 사용할 때 콘텐츠가 컨테이너 너비를 초과하면 텍스트 정렬에 어려움이 있을 수 있습니다. 이 문제를 이해하려면 Flex 컨테이너의 HTML 구조를 자세히 살펴보는 것이 중요합니다.

3계층 구조

Flex 컨테이너는 세 가지 개별 레이어로 구성됩니다.

• 컨테이너: 플렉스 컨테이너 자체
• 항목: 개별 플렉스 항목
• 콘텐츠: 요소 항목 내

각 레이어는 독립적인 엔터티를 나타냅니다. 즉, 컨테이너와 항목에 설정된 정렬 속성이 콘텐츠 정렬에 직접적인 영향을 미치지 않습니다.

Justify-Content 및 텍스트 정렬

justify-content 속성은 컨테이너 내 플렉스 항목의 정렬을 제어합니다. 항목 내의 콘텐츠 정렬을 직접 제어하지 않습니다.

justify-content:center가 행 방향 컨테이너에 적용되면 플렉스 항목은 콘텐츠 너비에 맞게 줄어들고 가로로 중앙에 배치됩니다. . 그러나 콘텐츠가 컨테이너 너비를 초과하는 경우 항목을 중앙에 맞출 수 없습니다.

이 시나리오에서는 justify-content 설정에 관계없이 기본적으로 콘텐츠가 왼쪽 정렬됩니다. 텍스트를 명시적으로 중앙에 배치하려면 flex 항목이나 해당 컨테이너에 text-align: center를 적용해야 합니다.

예시 데모

제공된 CSS 스니펫에서 flex 클래스는 justify-content를 적용합니다. : center이지만 너비가 컨테이너 너비를 초과하면 콘텐츠가 왼쪽으로 줄바꿈되어 왼쪽으로 정렬됩니다.

p 요소에 적용되는 .center 클래스에 text-align: center를 추가하면 텍스트가 올바르게 가운데에 맞춰집니다. 과도한 콘텐츠 너비에도 불구하고.

위 내용은 콘텐츠가 컨테이너 너비를 초과할 때 Flex 컨테이너 내에서 텍스트를 가운데에 배치하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!