Подтвердить что ты не робот

Как вертикально выравнивать плавающие элементы неизвестных высот?

У меня есть (горизонтально) центрированный внешний div, содержащий два элемента неизвестной ширины:

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

Оба поплавка по умолчанию выровнены по высоте и имеют разные/неизвестные и разные высоты. Есть ли способ сделать их вертикально центрированными?

В конце концов я сделал внешний div

display: table

и внутренние divs

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

но мне просто интересно, есть ли способ сделать это с помощью float.

Ответ 1

Вы не можете сделать это напрямую, потому что floats выровнены вверху:

Если есть строка строки, внешняя вершина плавающего поля выравнивается с верхней частью текущей строки строки.

Точный rules говорит (акцент мой):

Плавающий ящик внешний верх может быть не выше верхнего уровня содержащий блок.

внешний верх плавающей коробки не может быть выше внешней вершины любого block или floated поле, сгенерированное элемент ранее в исходном документе.

внешний верх элемента с плавающей запятой может быть не выше верхнего line-box, содержащий поле, сгенерированное элемент ранее в исходном документе.

Плавающий ящик должен быть размещен как можно выше.

Тем не менее, вы можете воспользоваться правилом № 4:

Поместите каждый поплавок внутри встроенных элементов, которые устанавливают новый контекст форматирования блоков/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>

Ответ 2

Другим подходом будет использование flex - это может быть замена для float, если у вас есть две части. Один (плавающий) будет иметь автоматический размер, а второй будет расти, чтобы занять весь контейнер. На поперечной оси вы выбираете center и voila, у вас есть эффект элементов с поплавком и центрированием.

Вот красивейший cheatsheet о flex: http://jonibologna.com/flexbox-cheatsheet/

Ответ 3

Нет, это когда ячейки таблицы внезапно кажутся отличной идеей. Если это фиксированная высота, вы можете использовать высоту линии.