47

幅が不明な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;

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

4

3 に答える 3

58

フロートが上に配置されているため、これを直接行うことはできません。

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

正確なルールは言う（私の強調）：

  1. フローティングボックスの外側の上部は、それを含むブロックの上部より高くすることはできません。
  2. フローティングボックスの外側の上部は、ソースドキュメントの前半の要素によって生成されたブロックまたはフロートボックスの外側の上部より高くすることはできません。
  3. 要素のフローティングボックスの外側の上部は、ソースドキュメントの前半の要素によって生成されたボックスを含むラインボックスの上部より高くすることはできません。

  1. フローティングボックスはできるだけ高く配置する必要があります。

そうは言っても、ルール＃4を利用できます。

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

.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>

于 2012-09-24T02:15:03.250 に答える
10

もう1つのアプローチは、を使用することです。2つのパーツがある場合はflex、の代わりになる可能性があります。float1つ（フローティング）は自動サイズで、もう1つはコンテナ全体を占めるように成長します。選択した交差軸上で、浮きと中央の要素centerの効果があります。

これがフレックスに関する美しいチートシートです： http：//jonibologna.com/flexbox-cheatsheet/

于 2015-01-01T12:46:58.820 に答える
3

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

于 2012-09-24T01:49:55.063 に答える