固有のサイズを変更せずに、可変高さの浮動要素を垂直方向に整列させるにはどうすればよいですか?

可変高さのフローティング要素を垂直方向に整列させる方法

水平方向に整列されたコンテナでは、フローティング要素はデフォルトで上部に整列する傾向があります。未知のさまざまな高さの要素を扱う場合、この調整により一貫性のない望ましくない結果が生じる可能性があります。目標は、これらの float 要素の固有のサイズを変更せずに、これらの float 要素を垂直方向の中央に配置する方法を見つけることです。

Float の制限

Float は、ブラウザーによって垂直方向の配置が制限されています。仕様。 CSS の float 動作のルール #8 では、float をできるだけ高い位置に配置する必要があると規定しています。これは、フロートの直接の垂直方向の位置合わせができないことを意味します。

インライン ブロック ラッパーの使用

この制限を回避するには、インライン ブロック要素を利用して、フロート要素。インライン ブロック要素はブロック フォーマット コンテキスト (BFC) を確立し、フロートを含めることができます。これらのラッパーに垂直方向の整列プロパティを与えることで、float 要素の位置を制御できます。

実装

1. 各 float 要素を inline-block 内に囲みます。 Wrapper.
2. これらのラッパーの表示プロパティを inline-block に設定します。
3. ラッパーを垂直方向に揃えるには、ラッパーのvertical-align プロパティを指定します。
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>

このアプローチは、さまざまな float 要素を効果的に垂直方向に中央に配置します。外側の div の表示プロパティに依存せずに高さを調整します。ただし、インラインブロックラッパーの間にスペースが生じる可能性があることに注意することが重要です。

以上が固有のサイズを変更せずに、可変高さの浮動要素を垂直方向に整列させるにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。