인라인 블록 요소를 사용하여 높이를 알 수 없는 부동 요소를 수직 중앙에 배치하는 방법은 무엇입니까?

인라인 블록 요소를 사용하여 높이를 알 수 없는 부동 요소를 수직 중앙에 배치하는 방법

부동 요소는 본질적으로 서로 인접하게 배치되지만 일반적으로 위에서부터 정렬됩니다. - 키에 관계없이 최고입니다. 이로 인해 특정 레이아웃에서 예상치 못한 수직 정렬 오류가 발생할 수 있습니다.

알 수 없는 높이의 플로팅 요소를 수직 중앙에 배치하려면 플로트의 자연스러운 상단 정렬을 피해야 합니다. 이는 다음 단계를 사용하여 달성할 수 있습니다.

1. 인라인 블록 래퍼 만들기: 각 부동 요소를 인라인 블록 요소로 묶습니다. 인라인 블록 요소는 수평으로 흐르므로 플로트가 인접한 위치를 유지할 수 있습니다.
2. 수직 정렬 설정: 수직 정렬 적용: 중간; 인라인 블록 래퍼에. 이 속성은 인라인 블록 요소의 수직 정렬을 지정하여 그 안에 있는 플로팅 요소를 수직 중앙에 배치합니다.
3. 나란한 위치 지정을 위한 너비 조정: 인라인 블록 요소를 보장하려면 -블록 래퍼는 나란히 배치되며 너비를 합하면 100%가 되는 백분율 값으로 설정됩니다. 이를 통해 수평 인접성을 유지하면서 사용 가능한 공간을 유연하게 조정할 수 있습니다.

이 단계를 수행하면 부동 요소 자체를 수정하지 않고도 알 수 없는 높이의 부동 요소를 세로 중앙에 배치할 수 있습니다. 이 기술을 사용하면 높이가 다양한 동적 콘텐츠를 시각적으로 균형 잡힌 레이아웃에 원활하게 통합할 수 있습니다.

위 내용은 인라인 블록 요소를 사용하여 높이를 알 수 없는 부동 요소를 수직 중앙에 배치하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!