Demostración: http://codepen.io/panasenco/pen/…
El truco consiste en separar la lógica CSS de alinear los elementos uno al lado del otro y centrarlos verticalmente, ya que son dos problemas completamente diferentes.
Alinear los divs uno al lado del otro y hacer que el más pequeño tenga la misma altura que el más grande:
Simplemente alinear dos divs uno al lado del otro es bastante fácil. Pero hacer que tengan la misma altura es un poco más difícil.
Para hacerlo, deberás colocar ambos divs en una position:relative; display:table; position:relative; display:table; padre div. El div más grande simplemente entrará, dejará espacio para sí mismo y dejará un margen a la izquierda o la derecha para el más pequeño. El div más pequeño usará position:absolute; y top:0; bottom:0; top:0; bottom:0; para ocupar el espacio vertical que creó el div más grande. Ahora ambos tienen la misma altura.
- Soy un nuevo programador que busca entrar en el desarrollo web. ¿Con qué tecnología debo comenzar?
- ¿Necesito construir una aplicación Hybird? ¿JQuery Mobile todavía se considera una buena opción para eso?
- Tengo un sitio web creado con Bootstrap. ¿Cómo integrarlo a PHP CodeIgniter Framework?
- Cómo integrar CKEditor con el modelo y vista Codeigniter
- Quiero comenzar un sitio web de una sola página para vender mi libro electrónico. ¿Con qué compañía / plan de alojamiento debo ir?
Alinear la línea verticalmente dentro del div más pequeño:
Hay varias formas de centrar verticalmente un div en un navegador cruzado: 6 métodos para el centrado vertical con CSS. Dado que esta pregunta se refiere a un div de altura fija, eso se puede lograr fácilmente con algo como la height:50px; top:50%; margin-top:-25px; height:50px; top:50%; margin-top:-25px; – pero no dude en consultar también los otros métodos vinculados anteriormente.
He probado la demostración en el antiguo navegador de stock que se envió con mi Galaxy S3 y funciona bien.
