CSS vertical alinear

Tengo un img en div flotante y no sé cómo centrarlo verticalmente.CSS vertical alinear

<div style="height: 300px"> 
    <img style="height: 50px" src="something" /> 
</div>

vertical-align: middle of course does not trabajo.

http://jsfiddle.net/wKQYj/

Fuente

2011-01-24 anonymous

Las dos formas que menciona este artículo ya se han dado como respuestas separadas, pero sería un mejor CSSer si supiera para qué se utiliza 'vertical-align': http://phrogz.net/css/vertical-alinear/ – scragz

@scragz - Ese es un buen enlace. Sin embargo, no usaría 'display: table-cell'. Por supuesto, tampoco usaría mi respuesta propuesta de '

'. Decir ah. – Jason

https://pbs.twimg.com/media/B2mW8NiCQAA6IIP.jpg – walv

Respuesta

Para texto vertical-align dentro de un elemento padre, y tener en cuenta que un img es un inline -elemento y así se comporta de manera similar al texto, se puede establecer simplemente el line-height a la height del elemento padre:

div { 
    height: 300px; 
    line-height: 300px; 
}

JS Fiddle demo.

Fuente

2011-01-24 18:56:31

vertical-align propiedad sólo es verdaderamente bueno en td elementos. Pruebe algo como:

<table> 
<tr> 
    <td style='height:300px; vertical-align:center'> 
    <img src='something'> 
    </td> 
</tr> 
</table>

O ya conoce la altura y la anchura de la img:

<div style='height:300px;'> 
<img style='height:50px; position:relative; top:50%; margin-top:-25px'> 
</div>

Fuente

2011-01-24 18:53:47 Jason

ZOMG, ninguna de las anteriores me parece bien, quiero decir que hay un agujero serio en CSS, están desarrollando sombras, etc. y tenemos que usar tablas todavía o en divs en divs para centrar verticalmente ... Holy cow. Tengo que usar divs. Y no puedo usar el segundo código porque los usuarios cambiarán la altura del div. Entonces estoy perdido. – anonymous

@anonymous: ¿puede usar JavaScript o cualquier biblioteca JS (MooTools, Scriptaculous, jQuery, Glow ...)? –

El estilo CSS vertical-align especifica la alineación del texto dentro de su fila de texto. Esto le permite especificar texto como superíndice o subíndice, por ejemplo.

Por lo tanto, no está diseñado para alinear verticalmente un elemento dentro de una caja.

Hay una excepción explícita a esto, sin embargo - celdas de la tabla (es decir <td> y <th> elementos) utilizan el estilo de vertical-align para hacer exactamente eso: alinear los contenidos de la celda dentro de la célula.

Esta excepción es algo así como una peculiaridad, realmente no debería existir. Los diseñadores de CSS lo pusieron allí para permitir que CSS reproduzca el atributo valign de los elementos de la tabla, que los diseñadores usaban habitualmente en los viejos tiempos de los diseños basados en tablas.

Para otros elementos, alinear el contenido de una caja verticalmente en el centro de la misma puede ser una obra de arte. Existen varias técnicas:

Para las líneas individuales de texto, sólo tiene que hacer el line-height la misma que la altura de todo el cuadro. Probablemente ni siquiera necesitará vertical-align para esto.
Utilice display:table-cell; para hacer que el elemento simule una celda de tabla, y luego use vertical-align. Esto funciona, pero puede tener consecuencias no deseadas (hay otros atributos de las celdas de la tabla que puede que no desee simular).
Si conoce la altura del elemento que desee alinear verticalmente, se puede colocar un 50% menos la mitad de su altura, así:
```
position:absolute; 
top:50%; 
height:200px; 
margin-top:-100px; /* half the height */ 
```

Hay algunos otros, pero esto debería hacerte comenzar.

Espero que ayude.

Fuente

2011-01-24 19:06:49 Spudley

Javascript probablemente sea la mejor opción para obtener la imagen centrada en el centro vertical para cada caso. si puedes usar una biblioteca como jQuery, son solo unas pocas líneas de código.

$(function(){ 
    var containerHeight = $('#container').outerHeight(); 
    var imgHeight = $('#logo img').outerHeight(); 

    var difference = (containerHeight - imgHeight)/2; 
    $('#logo img').css({'position' : 'relative', 'top' : difference + 'px'});

});

Fuente

2011-01-24 19:12:23 heymrcarter

Entonces, ¿necesita incluir la biblioteca jQuery completa, más este script? Parece un poco exagerado solo para centrar algo. – Jason

si tiene que centrar algo más que unas pocas veces y si no sabe A) cuál es la altura del div principal, y B) cuál es la altura de la imagen, esto funcionará siempre, y en cada case – heymrcarter

Para una solución más moderna (IE8 +) que no utiliza tablas, me gusta this one mejor.

<style> 
/* Can be any width and height */ 
.block { 
    height:500px; 
    text-align: center; 
} 

/* The ghost, nudged to maintain perfect centering */ 
.block:before { 
    content: ''; 
    display: inline-block; 
    height: 100%; 
    vertical-align: middle; 
    margin-right: -0.25em; /* Adjusts for spacing */ 
} 

/* The element to be centered, can be any width or height */ 
.centered { 
    display: inline-block; 
    vertical-align: middle; 
    width: 300px; 
} 
</style> 

<div class="block"><div class="centered">Centered Content</div></div>

Fuente

2013-03-08 22:38:07 Justin

La mejor solución, ya que no necesita saber la altura del contenido y no utiliza celdas de celdas de tabla. ¡Gracias por compartir! – Sygmoral

+1 ¡Truco inteligente! Esta debería ser la respuesta aceptada de la OMI. – Passerby

hay una manera de hacer esto mientras que .centered sea un ancho porcentual (que en realidad podría ser del 100%). –

Bastante cool and modern approach (con la altura especificada):

.Absolute-Center { 
    margin: auto; 
    position: absolute; 
    top: 0; left: 0; bottom: 0; right: 0; 
}

Fuente

2013-09-08 22:45:11 Agat

estoy usando la pantalla: propiedad de cuadro:

#container { 
    display: box; 
    box-orient: vertical; 
    box-pack: center; 
} 

#text { 
    vertical-align: middle; 
}

Ver el JS-violín aquí: verical align js-fiddle

Fuente

2014-11-03 10:13:38 Ruwen

Usa la propiedad translate, es simple y funciona incluso en IE:

img { 
    position: relative; 
    top: 50%; 
    transform: translateY(-50%); 
}

Fuente

2015-02-05 22:50:09 yulie

Muy agradable y corto camino! ¡Gracias! –

Cuestiones relacionadas