수직 정렬이 인라인 요소와 다르게 작동하는 이유는 무엇입니까?

세로 정렬 속성 이해

CSS의 세로 정렬은 특정 조건 및 예외로 인해 인라인 요소로 작업할 때 문제를 야기합니다.

세로정렬 적용

세로정렬 적용 지정된 높이를 가진 인라인 또는 블록 컨테이너 내의 요소를 인라인합니다. 높이를 정적 값(자동 또는 % 아님)으로 설정하는 것이 좋습니다.

인라인 요소 내 위치 지정

인라인 요소 내에서 수직 정렬은 요소의 정렬을 조정합니다. 요소의 텍스트 또는 콘텐츠를 수직으로 배치합니다. 이는 블록 요소 내에서 텍스트를 가로로 정렬하는 text-align과 다릅니다.

JSFiddle 예

제공된 JSFiddle에서 #header는 # 사이의 수직 중앙에 위치해야 합니다. 겉감과 #속함. 그러나 #header는 #inner의 상단에 위치합니다. #inner는 인라인 요소이지만 #header는 그렇지 않기 때문입니다.

Line-Box 정렬

Vertical-align은 라인 상자를 기준으로 요소를 정렬합니다. 이 상자는 텍스트나 내용의 개별 줄을 기반으로 만들어집니다. 따라서 여러 줄이 있는 경우 수직 정렬은 각 줄 상자에 정렬되어 요소 정렬이 컨테이너 높이 전체에서 일관되지 않는 예상치 못한 결과를 생성합니다.

추가 고려 사항

• 최신 브라우저는 자연스럽게 인라인이 아닌 요소에 대해 수직 정렬을 올바르게 처리합니다. 요소.
• 세로 정렬하려는 요소를 인라인 요소로 래핑해야 할 수도 있습니다.
• 일반적으로 줄 높이가 없는 요소에는 줄 높이를 추가하는 것이 좋습니다.
• 컨테이너의 전체 높이 내에서 요소를 수직으로 중앙에 배치하려면 Flexbox 또는 테이블.

위 내용은 수직 정렬이 인라인 요소와 다르게 작동하는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!