고유 크기를 수정하지 않고 가변 높이의 부동 요소를 수직으로 정렬하는 방법은 무엇입니까?

가변 높이의 플로팅 요소를 수직으로 정렬하는 방법

수평으로 정렬된 컨테이너에서 플로트는 기본적으로 위쪽에 정렬되는 경향이 있습니다. 높이가 알려지지 않고 다양한 요소를 처리할 때 이러한 정렬은 일관되지 않고 바람직하지 않은 결과를 초래할 수 있습니다. 목표는 고유한 크기 조정 없이 이러한 부동 소수점 요소를 수직으로 중앙에 배치하는 방법을 찾는 것입니다.

부동 소수점 제한

부동 소수점은 브라우저로 인해 수직 정렬이 제한됩니다. 명세서. CSS 플로트 동작의 규칙 #8은 플로트를 가능한 한 높게 배치해야 한다고 규정합니다. 이는 플로트의 직접적인 수직 정렬이 불가능하다는 것을 의미합니다.

인라인 블록 래퍼 사용

이 제한을 피하기 위해 인라인 블록 요소를 활용하여 부동 요소. 인라인 블록 요소는 BFC(Block Formatting Context)를 설정하여 부동 소수점을 포함할 수 있습니다. 이러한 래퍼 수직 정렬 속성을 제공함으로써 float 요소의 위치를 ​​제어할 수 있습니다.

구현

1. 인라인 블록 내에 각 float 요소를 묶습니다. 래퍼.
2. 이 래퍼의 표시 속성을 인라인 블록으로 설정합니다.
3. 래퍼를 수직으로 정렬하려면 래퍼의 수직 정렬 속성을 지정합니다.
4. 바깥쪽이 컨테이너는 수직으로 정렬된 float 요소를 수용할 수 있을 만큼 충분한 높이를 가지고 있습니다.

예

<code class="css">.float-left {
  float: left;
}

.float-right {
  float: right;
}

#main {
  border: 1px solid blue;
  margin: 0 auto;
  width: 500px;
}

#main > div {
  display: inline-block;
  vertical-align: middle;
  width: 50%;
}</code>

<code class="html"><div id="main">
  <div>
    <div class="float-left">
      <p>AAA</p>
    </div>
  </div>
  <div>
    <div class="float-right">
      <p>BBB</p>
      <p>BBB</p>
    </div>
  </div>
</div></code>

이 접근 방식은 다양한 플로트 요소를 세로로 효과적으로 중앙에 배치합니다. 외부 div의 표시 속성에 의존하지 않고 높이를 조정합니다. 그러나 인라인 블록 래퍼 사이에 약간의 공백이 나타날 수 있다는 점에 유의하는 것이 중요합니다.

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