Flexbox`` 요소 내에서 텍스트를 수직으로 가운데에 맞추는 방법은 무엇입니까?

align-items를 사용하여 Flexbox 내부의 텍스트를 수직으로 정렬하는 방법

Flexbox를 사용하여

요소에서 align-self: center를 사용하려고 하면 어려움에 직면할 수 있습니다. 이 문제를 해결하려면 대신 align-items: center를 사용하는 것이 좋습니다.

플렉스 항목에 적용되는 align-self와 달리 align-items는 플렉스 컨테이너에 적용 가능합니다. 이 경우 li 요소는 flex 컨테이너이므로 align-items: center가 하위 요소를 세로로 가운데에 배치할 수 있습니다.

필요한 조정이 포함된 업데이트된 코드 버전은 다음과 같습니다.

ul {
  height: 100%;
}

li {
  display: flex;
  justify-content: center;
  /* Remove align-self: center */
  align-items: center; /* Add align-items: center */
  background: silver;
  width: 100%;
  height: 20%;
}

항목 정렬 사용: 센터를 사용하면 래퍼 div가 필요하지 않습니다. 코드에 불필요한 요소를 추가하지 않고도 li 요소 내에서 텍스트를 수직으로 정렬할 수 있습니다.

위 내용은 Flexbox`` 요소 내에서 텍스트를 수직으로 가운데에 맞추는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!