高さが不明な浮遊要素を垂直方向の中央に配置するにはどうすればよいですか?

高さが不明な垂直方向に中央に配置された浮動要素

問題:

2 つの水平方向の中央に配置されたコンテナ要素があります。さまざまな高さの浮遊要素。デフォルトでは、これらのフロートはコンテナーの上部に位置合わせされます。どうすればそれらを垂直方向に中央揃えにできますか?

答え:

フロートは上部への配置を優先する特定の配置ルールに従っているため、フロートを直接垂直方向に配置することはできません。ただし、新しいブロック フォーマット コンテキスト (BFC) を確立する要素内に float を含めることができるというルールを利用することで、この効果を実現できます。

解決策:

1. display: inline-block を使用して、各 float をインラインレベルの要素でラップします。これにより、フロートの周囲に BFC が作成され、垂直方向の位置合わせが可能になります。
2. vertical-align を使用して、インライン ブロック ラッパーを垂直方向に位置合わせします。
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 中国語 Web サイトの他の関連記事を参照してください。