높이를 알 수 없는 부동 요소를 수직 중앙에 배치하는 방법은 무엇입니까?

높이를 알 수 없는 수직으로 가운데 정렬된 부동 요소

문제:

두 개의 수평 중심에 있는 컨테이너 요소가 있습니다. 다양한 높이의 부동 요소. 기본적으로 이러한 부동 소수점은 컨테이너 상단에 정렬됩니다. 어떻게 세로로 중앙에 배치할 수 있나요?

답변:

수레는 상단 정렬을 우선시하는 특정 정렬 규칙을 따르므로 직접 수직 정렬이 불가능합니다. 그러나 새로운 BFC(블록 형식 지정 컨텍스트)를 설정하는 요소 내에 부동 소수점을 포함할 수 있다는 규칙을 활용하면 이 효과를 얻을 수 있습니다.

해결책:

1. display: inline-block을 사용하여 각 플로트를 인라인 수준 요소로 래핑합니다. 이렇게 하면 플로트 주위에 BFC가 생성되고 수직 정렬이 가능해집니다.
2. 인라인 블록 래퍼를 수직으로 정렬하려면 수직 정렬을 사용하세요.
3. 래퍼의 너비가 내용을 수용할 만큼 충분한지 확인하세요. 그렇지 않으면 둘 사이에 공백이 나타날 수 있습니다.

예:

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

.float-right {
  float: right;
}

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

/* Float wrappers */
#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>

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