Flexbox의 수직 텍스트 정렬에 `align-self: center` 대신 `align-items: center`를 사용하는 이유는 무엇입니까?

Flexbox 내에서 텍스트의 수직 정렬

Flexbox 내에서 텍스트를 수직으로 정렬하려고 할 때 align-self: center를 사용하면 원하는 결과가 나오지 않을 수 있습니다. 대신 align-items: center를 활용하여 세로 정렬을 효과적으로 수행하는 것이 좋습니다.

ul {
  height: 100%;
}

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

align-items: center를 사용하면 flex 컨테이너에 직접 영향을 미치는 반면 align-self: center는 flex 항목에 적용할 수 있습니다. 이 경우 li는 flex 컨테이너를 설정하므로 align-items: center는 하위 요소를 수직으로 적절하게 정렬합니다.

<ul>
  <li>This is the text</li>
</ul>

요약하자면, flexbox 내의 수직 텍스트 정렬의 경우 align-items: center는 align-를 대체해야 합니다. 본인: 중심. 이렇게 하면 상위 플렉스 컨테이너가 하위 요소를 수직으로 적절하게 배치하여 원하는 정렬 효과를 얻을 수 있습니다.

위 내용은 Flexbox의 수직 텍스트 정렬에 `align-self: center` 대신 `align-items: center`를 사용하는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!