Вопрос по css, vertical-alignment, css-float – Как выровнять по вертикали плавающие элементы неизвестной высоты?

43

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

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

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

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

display: table

и внутренние дивы

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

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

@MarcB Вы не одиноки, но это то, с чем мы должны работать .... Yang
Выравнивание по вертикали в html / css выходит за рамки уродства, и основной источник моего ноющего желания шлепнуть весь W3C гниющим трупом IE6, а затем скормить им этот труп. Marc B

Ваш Ответ

3   ответа
9

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

Вот красивая шпаргалка о флексе:http://jonibologna.com/flexbox-cheatsheet/

Конечно, вы сталкиваетесь с ужасом IE, когда пытаетесьuse flex. :-|
Эта таблица очень полезна.
3

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

@JoelCoehoorn конечно. Хотя идея таблицы заключается в том, что все ваши данные представлены одинаково. Я не могу вспомнить ситуацию, когда вам нужно, чтобы элементы реагировали иначе, чем другие, когда они выровнены одинаково в неотвечающей форме. Я создал более 250 адаптивных веб-сайтов и никогда не сталкивался ни с чем, где это было проблемой. Я бы хотел увидеть пример, если он у вас есть. Довольно любопытно!
И если у кого-то есть аллергия на использование таблиц для разметки, можно также использовать таблицы css (хотя под капотом это все еще таблицы).
@JoelCoehoorn, что совершенно не соответствует действительности, если вы используете таблицы CSS. Просто измените отображение таблицы на отображение блока, когда это необходимо, в правом запросе CSS.
@ Младенец весь стол ... конечно. Для отдельных элементов td в одной строке это странно.
Таблица не очень хороша, если вы хотите адаптивный макет, который будет естественно отображаться под левым элементом в узких видовых экранах.
57

поплавки выровнены к вершине:

If there is a line box, the outer top of the floated box is aligned with the top of the current line box.

Точныйправила сказать (выделение мое):

A floating box's outer top may not be higher than the top of its containing block. The outer top of a floating box may not be higher than the outer top of any block or floated box generated by an element earlier in the source document. The outer top of an element's floating box may not be higher than the top of any line-box containing a box generated by an element earlier in the source document.

A floating box must be placed as high as possible.

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

Place each float inside inline-level elements that establish a new block formatting context /BFC), e.g. display: inline-block. These wrappers will contain the floats because they establish a BFC, and will be one next to the other because they are inline-level. Use vertical-align to align these wrapper vertically.

Помните, что между упаковщиками inline-block может появиться свободное пространство. УвидетьКак убрать пробел между элементами inline-block? починить это.

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

Это не работает хорошо по другой причине - контент вертикально центрирован на себя. Если вы измените высоту контейнера вручную, вы увидите, что обе части действительно находятся на верхней части контейнера.
@ newms87 Вероятно, правда. Но тогда не будет никакого числа с плавающей запятой, поэтому он не будет отвечать на вопрос. Теперь я думаю, что отвечу, даже если я немного обманываю.
Я понимаю, что это определенно имеет применение, но мне это кажется обманом. единственная вещьfloat: right здесь правильно, чтобы оправдать содержание BBB. этоdisplay: inline-block а такжеvertical-align: middle это на самом деле делает центрирование. это не совсем вертикально центрированное плавающее содержимое вообще.
Поплавок здесь даже не должен использоваться. Это не преследует никакой цели, кроме как оправдать право на контент, как упомянуто @Simon_Weaver. Вместо этого было бы лучше использоватьtext-align: right таким образом высота div будет частью потока страницы без использования clearfix.
это решение работает, потому что вы положилиwidth:49%; даже без плавающего div это будет работать.

Похожие вопросы