web-dev-qa-db-ja.com

不明な高さのフローティング要素を垂直方向に中央揃えするには？

幅が不明な2つの要素を含む（水平方向に）中央に配置された外部divがあります。

<div style='width:800px; margin:0 auto'>
  <div style='float:left'>...</div>
  <div style='float:right'>...</div>
</div>

両方のフロートはデフォルトで上揃えで、さまざまな/不明な高さの違いがあります。それらを垂直方向に中央揃えにする方法はありますか？

私は最終的に外側のdivを作りました

display: table

そして内側のdiv

display: table-cell;
vertical-align: middle;
text-align: left/right;

しかし、私はフロートでこれを行う方法があるかどうかだけに興味があります。

csscss-floatvertical-alignment
44
Yang

floats が上に揃えられているため、これを直接行うことはできません。

ラインボックスがある場合、フロートボックスの外側の上部は、現在のラインボックスの上部に揃えられます。

正確な rules say（emphasis mine）：

  1. フローティングボックスの outer top は、 含むブロック のtopより高くない場合があります。
  2. フローティングボックスの outer top は、ソースの前の要素によって生成された block または floated boxのアウタートップより高くてはなりません。資料。
  3. 要素のフローティングボックスの outer top は、ソースドキュメントの前の要素によって生成されたボックスを含む line-box の最上部より高くてはなりません。
  1. フローティングボックスはできるだけ高く配置する必要があります。

とはいえ、ルール4を活用できます。

  • 各フロートを inline-level 内に配置して、新しい ブロックフォーマットコンテキスト /BFC）を確立する要素、例えばdisplay: inline-block。
  • これらのラッパーは、BFCを確立するためにフロートを含み、インラインレベルであるため、互いに隣接しています。
  • つかいます - vertical-align これらのラッパーを垂直に揃えます。

インラインブロックラッパーの間にスペースが表示される場合があることに注意してください。 インラインブロック要素間のスペースを削除する方法 を参照して修正してください。

.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%;
}
<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>
57
Oriol

別のアプローチは、flexを使用することです。2つの部分がある場合は、floatの代わりになる可能性があります。 1つ（フローティング）は自動サイズで、2つ目はコンテナ全体を占めるように大きくなります。 centerと出来上がりを選択する交差軸上には、フロート要素と中央要素のeffectがあります。

Flexに関する美しいチートシートは次のとおりです。 http://jonibologna.com/flexbox-cheatsheet/

9
greenoldman

いいえ、これはテーブルセルが突然素晴らしいアイデアのように見えるときです。高さが固定されている場合は、line-heightを使用できます。

3
Trent Stewart