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

43

У меня есть (горизонтально) центрированный внешний 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 и вуаля, у вас естьэффект поплавка и центрированных элементов.

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

Этот шпаргалка очень полезна. Ghost Echo
Конечно, вы сталкиваетесь с ужасом IE, когда пытаетесьиспользовать flex, : - | T.J. Crowder
57

Вы можете'сделать это напрямую, потому чтопоплавки выровнены к вершине:

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

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

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

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

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

Поместите каждый поплавок внутрьинлайн-уровня элементы, которые устанавливают новыйблок форматирования контекста / BFC), например ,display: inline-blockЭти обертки будут содержать числа с плавающей точкой, потому что они устанавливают BFC, и будут находиться одна рядом с другой, потому что они находятся на уровне строки.использованиеvertical-align выровнять эти обертки по вертикали.

Помните, что между упаковщиками 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%;
}

  
    
      <p>AAA</p>
    
  
  
    
      <p>BBB</p>
      <p>BBB</p>
    
  

@ newms87 Вероятно, правда. Но тогда выигралне было бы поплавка, так что не было быТ ответить на вопрос. Теперь я думаю, что отвечу, даже если я немного обманываю. Oriol
@greenoldman Если родитель имеет явную высоту, вы можете вставить псевдоэлемент встроенного уровня с помощьюheight: 100% а также (vertical-align: middleцентрирование в неизвестном техника). Oriol
Я долго искал подобное решение. Спасибо! Mosh Feu
там'нет ничего с изменой иногда (или больше чем иногда с CSS) ;-) но это 'просто важно, что люди неслепо копировать фрагменты кода, не понимая их - или онипозже мы получим неожиданные и запутанные побочные эффекты Simon_Weaver
3

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

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

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