래퍼 없이 Flexbox 컨테이너 내에서 텍스트를 수직으로 정렬하는 방법은 무엇입니까?

Flexbox 컨테이너 내 세로 텍스트 정렬

Flexbox 레이아웃 내에서 콘텐츠를 세로로 정렬하는 것은 어려울 수 있습니다. 추가 래퍼 요소를 사용하지 않고 이를 달성하는 방법은 다음과 같습니다.

귀하의 예에서 문제는

요소. 대신, 상위

항목에 align-items: center를 사용하세요. 요소. 그러면
• 의 하위 요소가 Flexbox 컨테이너 내에서 수직으로 정렬됩니다.

  업데이트된 코드는 다음과 같습니다.

  ul {
    height: 100%;
  }
  
  li {
    display: flex;
    justify-content: center;
    align-items: center;  /* Updated this line */
    background: silver;
    width: 100%;
    height: 20%;
  }

  설명:

  • align-self는 개별 플렉스 항목에 적용되며 해당 항목의 정렬을 제어합니다. 그러나 귀하의 경우
  • 상위 요소
    에 display: flex가 적용되지 않았기 때문에 flex 항목은 아닙니다.
    • align-items는 flex 컨테이너 내에서 flex 항목의 정렬을 제어합니다.
    • flex 컨테이너인 align-items: center는
    • 내부의 요소를 수직으로 효과적으로 중앙에 배치합니다.
    • 에서 align-self: center 제거 align-items에 지정된 수직 정렬을 재정의하므로 매우 중요합니다.

    위 내용은 래퍼 없이 Flexbox 컨테이너 내에서 텍스트를 수직으로 정렬하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!