래퍼 없이 Flexbox를 사용하여 `` 요소의 텍스트를 수직으로 정렬하는 방법은 무엇입니까?

Flexbox에서 텍스트 수직 정렬

Flexbox를 활용하여

요소를 사용하면 몇 가지 문제에 직면할 수 있습니다. 많은 온라인 튜토리얼에서는 상위 플렉스 설정에 align-items: center를 할당하여 이러한 정렬을 달성하기 위해 래퍼 div를 사용할 것을 제안합니다. 그러나 추가 요소가 필요하지 않게 하는 것이 가능합니다.

래퍼 div 없이 세로 정렬을 얻으려면 align-self: center를 align-items: center로 조정하세요. 이 간단한 수정으로 효과적인 정렬이 보장됩니다.

ul {
  height: 100%;
}

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

display: flex 또는 display: inline-flex가 있는 플렉스 컨테이너가 필요한 flex 항목에 align-self가 적용된다는 점을 기억하세요. 이 경우

플렉스 컨테이너이므로 align-items는 수직 정렬에 적합한 속성입니다.

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