Elementos del centro verticalmente en CSS

Question

Tengo dos elementos uno al lado del otro. El elemento 2 es más pequeño que el elemento 1. Ambos elementos no tienen una altura fija. Necesito centrar verticalmente el Elemento 2. ¿Cómo lo logro usando CSS?

Editado:

Esto es lo que tengo hasta ahora: altura

<div id="container" style="width: 100%;"> 
    <div id="img1" style="float: left;"> 
     <img src="image1.jpg".../> 
    </div> 
    <div id="img2" style="float: right;"> 
     <img src="image2.jpg".../> 
    </div> 
</div> 

de img1 siempre será mayor que la altura de img2. Quiero que img2 esté alineado en el centro vertical. Espero que esto aclare lo que estoy tratando de lograr.

Answer 1

La forma más sencilla y limpia de hacerlo es usar display: table y vertical-alinear. Sin embargo, IIRC (ha pasado un tiempo desde que tuve problemas de compatibilidad con el navegador) admite display: table y sus amigos están ausentes de ... algunas versiones comunes de IE, ¿no es así? De todos modos, agregar otras reglas para hacer un repliegue adecuado si se ignora el display: table podría ser bueno.

<div id="container" style="display: table;"> 
    <div id="div1" style="display: table-cell; vertical-align: middle;"> 
     <img id="img1" src="image1.jpg" /> 
    </div> 
    <div id="div2" style="display: table-cell; vertical-align: middle;"> 
     <img id="img2" src="image2.jpg" /> 
    </div> 
</div> 

(Por supuesto, los estilos debe estar en una hoja de estilo, esto es sólo que coincidan con su ejemplo original y no conocer el caso de uso.)

Los display valores table, table-row y table-cell realizan, básicamente, exactamente como HTML table, tr, y td, pero se le permite omitir cualquiera de ellos (como lo hago aquí, usando table-cell s directamente dentro de table s) y el motor de diseño hará lo razonable.

Answer 2

Colóquelos dentro de otro elemento, asígnele un ancho mínimo y establezca los márgenes izquierdo y derecho en automático.

Answer 3

No es fácil. Algunos hacks populares incluyen el uso de display: table-cell y un parent que usa display: table (no recuerdo si el atributo valign = "center" es necesario), o usando posicionamiento absoluto con top: 45% más o menos (no es preciso, pero está bien para elementos pequeños).

Para determinar el mejor método, necesitamos saber más acerca de su diseño. ¿En qué están centrados? ¿Puede/puede haber una gran distancia Y entre los elementos 1 y 2? ¿Sus padres tienen una altura fija? ¿Ambos tienen los mismos padres o uno es hermano del otro? ¿Qué método estás usando para colocarlos uno al lado del otro?

Tenga en cuenta que muchos trucos requieren hackeo adicional para trabajar en IE, y que usar Javascript es simplemente hacer trampa y hará que su sitio sea inaccesible/molesto para personas con baja visión (que pueden estar usando lectores de pantalla sin script), personas con scripts desactivados (especialmente en dispositivos móviles o navegadores de línea de comandos que pueden no ser compatibles si es así), motores de búsqueda, etc. Es posible usar solo CSS (aunque puede que tenga que agregar algunos elementos de contenedor), pero el El método depende de lo que estés haciendo exactamente.

Answer 4

No creo que puedas hacer esto de manera confiable sin una mesa. La solución de Kevin probablemente funcione, a menos que necesites soporte para IE (que la mayoría de nosotros sí). Y, en este caso, el marcado de tabla en realidad podría ser más pequeño que el marcado basado en div.

Answer 5

Si solo necesita admitir navegadores nuevos como Safari (por ejemplo, compilando aplicaciones para el iPhone), CSS3 ofrece un enfoque elegante, sin flotantes ni márgenes negativos. Todos los detalles aquí: http://www.html5rocks.com/en/tutorials/flexbox/quick/#toc-center