>웹 프론트엔드 >CSS 튜토리얼 >높이를 알 수 없는 부동 요소를 수직으로 정렬하는 방법은 무엇입니까?

높이를 알 수 없는 부동 요소를 수직으로 정렬하는 방법은 무엇입니까?

Susan Sarandon
Susan Sarandon원래의
2024-11-03 08:44:03584검색

How to Vertically Align Floating Elements of Unknown Heights?

알 수 없는 높이의 부동 요소를 수직으로 정렬

중심 외부 분할 내에서 알 수 없는 높이의 부동 요소를 수직으로 정렬하려고 할 때 다음과 같은 문제가 발생할 수 있습니다. 플로트의 자연스러운 상단 정렬로 인해 어려움이 있습니다. 그러나 인라인 수준 요소와 수직 정렬 속성을 사용하여 수직 정렬을 달성하는 대체 접근 방식이 있습니다.

수직 정렬 방법:

플로팅 요소를 수직으로 정렬하려면 외부 구분선 내에서 다음 단계를 따르세요.

  1. 인라인 수준 래퍼 만들기: 디스플레이가 있는 것과 같은 별도의 인라인 수준 요소 내에서 각 플로트를 래핑합니다. 블록 속성. 이는 각 부동소수점에 대해 새로운 블록 형식화 컨텍스트(BFC)를 설정합니다.
  2. 포지션 래퍼 인라인: 인라인 수준 래퍼는 인라인 특성으로 인해 서로 옆에 인라인으로 배치됩니다. .
  3. 래퍼를 수직으로 정렬: 인라인 수준 래퍼의 수직 정렬 속성을 사용하여 외부 구분선 내에서 수직으로 정렬합니다.

잠재적인 문제:

인라인 수준 래퍼 사이에 약간의 잔여 공간이 있을 수 있습니다. 이 문제를 해결하려면 제공된 답변에서 언급한 것과 같이 인라인 블록 요소 사이의 공백 제거에 대한 추가 리소스를 참조하세요.

결론:

디스플레이: inline-block 속성과 수직 정렬 속성을 사용하면 외부 분할 내에서 높이를 알 수 없는 부동 요소를 효과적으로 수직으로 정렬할 수 있습니다.

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

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.