css - texto - Alineación vertical central con pantalla de la celda de la tabla no funciona en las imágenes

texto vertical tabla html

Question

Estoy tratando de usar la alineación vertical: medio en un diseño para centrar verticalmente el texto, a veces las imágenes, pero solo funciona en el texto. puede alguien decirme por que?

HTML:

<div>
<img src="http://jsfiddle.net/img/logo.png"/>
</div>
<div>
<span> text </span>
</div>

CSS:

div{
width:200px;
height:200px;
background-color:red;
display:table;
margin:10px;
}
img, span{
display:table-cell;
vertical-align:middle;
}

http://jsfiddle.net/9uD8M/ También creé un violín

Answer 1

Aquí hay una forma de solucionar el problema:

HTML:

<div>
<span><img src="http://jsfiddle.net/img/logo.png" /></span>
</div>
<div>
<span> text </span>
</div>

Coloque su img en un span , la imagen es un elemento reemplazado, no puede contener contenido para niños, por lo tanto, la alineación vertical no funcionará.

CSS:

div {
width:200px;
height:200px;
background-color:red;
display:table;
margin:10px;
}
span {
display:table-cell;
vertical-align:middle;
}

Vea la demostración en: http://jsfiddle.net/audetwebdesign/Fz6Nj/

Hay varias formas de hacer esto, también podría aplicar display: table-cell al elemento div principal, pero ese sería un enfoque diferente.

Answer 2

Coloque el border: 1px solid black en su img, span etiquetas de img, span , luego inspeccione ambos elementos en el navegador del navegador. consola. Notará que el intervalo predeterminado es el 100% de la altura de su padre, mientras que la imagen tiene una altura definida (la altura de la imagen real).

Entonces, en realidad no estás alineando verticalmente esos elementos con relación al div, simplemente estás alineando verticalmente el texto dentro del elemento span con relación al span :)

Si realmente desea utilizar las tablas para el centrado vertical, aquí está el código correcto: http://jsfiddle.net/WXLsY/

( vertical-align y display:table-cell va en el padre, y necesita una tabla de envoltura en ellos)

Pero hay otras formas de hacerlo (SO tiene muchas respuestas a esta pregunta, solo use la búsqueda)

Answer 3

Para alinear verticalmente una imagen dentro de una celda de tabla, debe darle a la imagen una visualización de bloque.

display: block
margin: 0 auto

El margen: 0 auto es alinear la imagen al centro. Si desea que la imagen quede alineada, no incluya esto. Si quieres que la imagen esté alineada correctamente puedes agregar:

float: right

Gracias, g

Answer 4

Puedes intentarlo agregando -> line-height: 200px; en la sección de estilo span, creo que podría funcionar;