Cómo centrar elementos secundarios verticalmente dentro div

Duplicar posibles:
How to make an image center (vertically & horizontally) inside a bigger div Cómo centrar elementos secundarios verticalmente dentro div

código HTML:

<div class="promo_tumbs col_12"> 
    <div class="promo_tumb"></div> 
    <div class="promo_tumb"></div> 
    <div class="promo_tumb"></div> 
    <div class="promo_tumb"></div> 
    <div class="promo_tumb"></div> 
</div>

CSS parte:

.promo_tumbs { 
    height: 155px; 
    background: #058; 
} 
.promo_tumb { 
    height: 75px; 
    width: 125px; 
    background: #990000; 
    float: left; 
    margin: 0 10px; 
    text-align: center; 
}

¿Cómo puedo centrarme verticalmente en .promo_tumb?

Fuente

2012-04-23 Sasha

Lea este artículo sobre centrado vertical.

http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

si usted no quiere el apoyo IE7 o menor, puede utilizar vertical-align : middle.

lo contrario:

Establecer display a table en .promo_tumbs col_12
Establecer vertical-align-middle & display a table-cell para .promo_tumb

y debería funcionar.

Fuente

2012-04-23 11:45:06

El artículo es bastante bueno. Gracias por el enlace, es muy informativo :) – Sasha

¿El ajuste de visualización a la tabla adolece de los mismos inconvenientes que con el uso de tablas reales? –

No soy un gran admirador de este método (lo he usado una vez para un hack rápido). Pero sí, eso creo. –

¿Las alturas (155px y 75px respectivamente) serán siempre corregidas? En ese caso, sería tan simple como cambiar el margen .promo_tumb:

margin: 40px 10px

Fuente

2012-04-23 11:43:07

Esto está todavía en ciernes, por lo que en las alturas momento son sólo para las pruebas. – Sasha

Bueno, el mejor enfoque para el centrado vertical depende mucho de qué variables se conozcan. –

Cuando el diseñador decida, voy a hacer los cálculos. Gracias por tu ayuda :). – Sasha

uso del vertical-align: middle; en el css/estilo para promo_thumbs.

Fuente

2012-04-23 11:44:00 Manuel

css part insert in head section.......... 

    <style type="text/css"> 
    .promo_tumbs {height: 155px; background: #058; } 
    .promo_tumb {height: 75px; width: 125px; background: #990000; float: left; 

    margin: 40px 50px; 

    text-align: center; } 
    </style>

parte del cuerpo codificación ......

  <div class="promo_tumbs col_12"> 
       <div class="promo_tumb"></div> 
       <div class="promo_tumb"></div> 
       <div class="promo_tumb"></div> 
       <div class="promo_tumb"></div> 
       <div class="promo_tumb"></div> 
      </div>

Fuente

2012-04-23 11:57:04

-1

.promo_tumbs {height: 155px; background: #058; 
    vertical-align: middle; 
    display:table-cell; 
}

Fuente

2012-04-23 12:00:45 BLUEPIXY

Cómo centrar elementos secundarios verticalmente dentro div

Respuesta

Cuestiones relacionadas