css - texto - ¿Cómo alinear verticalmente elementos flotantes de alturas desconocidas?

centrar texto horizontalmente css

Question

Tengo un div externo (centrado) horizontalmente que contiene dos elementos de ancho desconocido:

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

Ambos flotadores están alineados en la parte superior por defecto, y son de alturas diferentes / desconocidas y diferentes. ¿Hay alguna manera de hacerlos centrados verticalmente?

Finalmente hice el div externo

display: table

y los divs internos

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

pero solo tengo curiosidad si hay una forma de hacer esto con las carrozas.

Answer 1

No puedes hacer esto directamente, porque los floats están alineados a la parte superior:

Si hay un cuadro de línea, la parte superior exterior de la caja flotante se alinea con la parte superior del cuadro de línea actual.

Las rules exactas dicen (énfasis mío):

4. La parte superior exterior de una caja flotante no puede ser más alta que la parte superior de su bloque contenedor .
5. La parte superior exterior de una caja flotante no puede ser más alta que la parte superior exterior de cualquier block o cuadro floats generado por un elemento anterior en el documento original.
6. La parte superior exterior de la caja flotante de un elemento no puede ser más alta que la parte superior de cualquier line-box contenga un recuadro generado por un elemento anterior en el documento original.

8. Una caja flotante debe colocarse lo más alto posible.

Dicho esto, puede aprovechar la regla # 4:

• Coloque cada flotador dentro inline-level elementos de inline-level en inline-level que establezcan un nuevo contexto de formato de bloques / BFC), por ejemplo, display: inline-block .
• Estas envolturas contendrán los flotantes porque establecen un BFC, y estarán uno al lado del otro porque están en línea.
• Use vertical-align para alinear estos envoltorios verticalmente.

Tenga en cuenta que puede aparecer espacio entre las envolturas de bloque en línea. Consulte ¿Cómo eliminar el espacio entre los elementos de bloque en línea? arreglarlo.

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

Answer 2

No, esto es cuando las células de la mesa de repente parecen una gran idea. Si es una altura fija, puede usar la altura de la línea.

Answer 3

Otro enfoque sería usar flex , podría ser un reemplazo para un float si tiene dos partes. Uno (flotante) sería de tamaño automático, y el segundo crecería para ocupar todo el contenedor. En el eje transversal, elige center y listo, tienes el efecto del flotador y los elementos centrados.

Aquí hay una hermosa hoja de trucos sobre flex: http://jonibologna.com/flexbox-cheatsheet/