html - middle - vertical align not working
Alinear verticalmente todos los elementos(!) En TD? (11)
Tengo una table simple con 1 TD con vertical-align:middle; . Este TD contiene una Image :
<table>
<tr>
<td>
<img src=''http://static.jsbin.com/images/favicon.png''/>
</td>
</tr>
</table>
Todo está bien y la IMG está alineada verticalmente.
Pero si agrego otros elementos después de esa imagen (un span por ejemplo):
<td>
<img src=''http://static.jsbin.com/images/favicon.png''/>
<span>aaa</span>
</td>
El resultado es :
Pregunta
¿La alineación vertical del TD no debería alinear verticalmente a todos sus hijos?
¿Cómo puedo hacer que el span se centre también ?
nótese bien
No quiero agregar otro TD , ni usar float con relleno / margen. IE8 +.
editar:
Resultado deseado :
Pregunta
¿La alineación vertical del TD no debería alinear verticalmente a todos sus hijos?
No
Cuando aplica vertical-align a td , solo se aplica a td y no es heredado por ninguno de sus hijos.
Si tengo un TD con solo un tramo, se alineará verticalmente. Si tengo un TD con solo IMG dentro, también se alineará.
Esto se debe a la forma vertical-align para td . La altura total de la celda, es decir, td se calcula y toda la celda se alinea verticalmente.
Si hay un solo img , entonces la altura de td es la misma que la de img , por lo que parece que vertical-align para img también es la middle . Pero en realidad, el td está alineado verticalmente al medio con el img como vertical-align : baseline
Igual es el caso cuando hay un solo span .
Pero si tengo ambos, no los tiene. porqué es eso ?
Porque ahora, la height de td es la height combinada de ambos img + span . Entonces, en realidad, td está alineado verticalmente en el medio, pero no img y span .
¿Cómo puedo hacer que el lapso se centre también?
Necesitas aplicar este CSS:
td > * {
vertical-align : middle;
}
Esto aplicará el CSS a todos los niños.
Compruebe el JSFiddle para una mejor imagen.
Espero que esto responda a su pregunta.
¿Es esto lo que quieres decir? http://jsfiddle.net/JFVNq/
La razón es que los intervalos se tratan como en línea, por lo que es necesario hacer que se bloqueen.
CSS para el lapso:
td.vert span
{
vertical-align: middle;
display: block;
}
Aquí hay una solución JS Fiddle
Aqui esta el css
table
{
border:solid 1px red;
width:300px;
}
td
{
height:100px;
vertical-align:middle;
width:100%;
border:solid 1px green;
}
img
{
display: inline;
height: 43px;
width: 43px;
position: relative !important;
float: left;
}
span
{
height: auto !important;
width: 80%;
float: right;
position: relative;
vertical-align: middle !important;
text-align: left;
}
Creo que todos estamos casi allí, pero
td img,
td span {
display:inline-block;
vertical-align:middle;
}
parece funcionar.
¿O me estoy perdiendo algo?
En todos los casos, la vertical-align: middle; En la td hace lo que se espera de ella. Es decir, alinee el td con el centro de esa fila y todo el contenido del td con el centro vertical (por defecto) dejando espacios iguales en la parte superior e inferior.
Esto es lo que dice W3 Spec sobre
vertical-align: middle:El centro de la celda está alineado con el centro de las filas que abarca.
Cálculo de la altura de la fila:
La altura de la casilla de un elemento ''tabla-fila'' se calcula una vez que el agente de usuario tiene todas las celdas en la fila disponibles: es el máximo de la ''altura'' calculada de la fila, la ''altura'' calculada de cada celda de la fila, y la altura mínima (MIN) requerida por las celdas.
En CSS 2.1, la altura de un cuadro de celda es la altura mínima requerida por el contenido. La propiedad ''altura'' de la celda de la tabla puede influir en la altura de la fila (ver arriba), pero no aumenta la altura de la casilla de celda.
Los cuadros de celdas que son más pequeños que la altura de la fila reciben un relleno adicional superior o inferior.
Como resultado de lo anterior, la altura de tr y td convierte en 100px, pero el cuadro de celda ocupa solo la cantidad de altura requerida por el contenido ( img height = 43px). Ahora, dado que el cuadro Celda es más pequeño que el alto de la fila, se agrega relleno adicional como se muestra en el Cuadro 5 de la imagen de arriba y, por lo tanto, el contenido también se alinea con el centro.
TD solo tiene imagen:
Cuando solo hay un img , la altura del contenido es igual a la altura del img . Así se posiciona al medio.
Como se puede ver en la imagen anterior, esto no requiere una vertical-align: middle en el vertical-align: middle de la imagen explícitamente porque el td alinea su contenido con el centro.
TD solo tiene datos en línea:
Cuando el td solo tiene un span o span más un div línea, la altura del contenido es igual a la line-height de line-height predeterminada para el texto (o cualquier line-height especificada). En este caso también, el td alinea correctamente.
Cuando el contenido del texto va más allá de la primera línea (refiérase a la demostración), puede ver que td empuja automáticamente la first-line (marcada en fondo cian) hacia arriba para asegurarse de que el contenido en general esté alineado al medio (no sólo una sola línea).
TD tiene una imagen y un lapso:
Cuando colocamos un img y un span (texto en línea) dentro de la td , la altura del contenido se iguala a la altura del img más la line-height de la line-height de la segunda línea y las subsiguientes.
En esta situación, hay dos casos posibles como se describe a continuación:
Caso 1: la etiqueta img no tiene una vertical-align especificada
En este caso, el img se alinea con la baseline (predeterminado). Luego el td alinea todo el contenido al medio. Esto significa que la td deja un espacio de 28.5px (= (100-43) / 2) en la parte superior e inferior del contenido. Nuevamente, la vertical-align en td hace el trabajo, pone los contenidos en el medio (es decir, deja un espacio igual en la parte superior e inferior). Pero el texto se empuja hacia abajo porque img height es más.
Si reducimos la altura de img a menos que la altura de la línea (por ejemplo, 10px), podemos ver que incluso con img + span se alinea con el medio.
Caso 2 - la etiqueta img tiene vertical-align: middle
En este caso, también vertical-align en el td hace lo mismo que en el caso 1. Sin embargo, el texto en este caso está cerca del medio porque el img también está alineado con el middle de la línea.
table {
border: solid 1px red;
}
td {
height: 100px;
width: 200px;
vertical-align: middle;
border: solid 1px green;
}
img {
height: 43px;
width: 43px;
border: solid 1px green;
}
.one td + td img {
vertical-align: middle;
}
.three td + td img {
height: 10px;
width: 10px;
}
.four img {
vertical-align: middle;
}
.five img + img{
height: 50px;
width: 50px;
}
td:first-line {
background-color: cyan;
}
div {
display: inline;
}
<table>
<tr class=''one''>
<td>
<img src=''http://static.jsbin.com/images/favicon.png'' />
</td>
<td>
<img src=''http://static.jsbin.com/images/favicon.png'' />
</td>
</tr>
<tr class=''two''>
<td>
<div>aaa</div>
<span>aaa</span>
</td>
<td>
<div>aaa</div>
<span>aaa aaaaaaa aaaaaaaa aaaaaaaa</span>
</td>
</tr>
<tr class=''three''>
<td>
Case 1
<img src=''http://static.jsbin.com/images/favicon.png'' />
<span>Image + Span</span>
</td>
<td>
Case 1
<img src=''http://static.jsbin.com/images/favicon.png'' />
<span>Image + Span</span>
</td>
</tr>
<tr class=''four''>
<td>
Case 2
<img src=''http://static.jsbin.com/images/favicon.png'' />
<span>Image + Span</span>
</td>
<td>
<img src=''http://static.jsbin.com/images/favicon.png'' />
<span>Image + Span + more text.......</span>
</td>
</tr>
<tr class=''five''>
<td>
Case 3
<img src=''http://static.jsbin.com/images/favicon.png'' />
<img src=''http://static.jsbin.com/images/favicon.png'' />
<span>Image + Span text...</span>
</td>
<td>
<img src=''http://static.jsbin.com/images/favicon.png'' />
<span>Image + Span + more text.......</span>
</td>
</tr>
</table>
Este atributo de CSS no se aplica a ningún otro tipo de elementos . Cuando el desarrollador novato aplica una alineación vertical a los elementos de bloque normales (como un estándar), la mayoría de los navegadores establecen el valor para heredar a todos los elementos secundarios en línea de ese elemento.
Simplemente necesita agregar vertical-align: middle a la clase <img> .
Tu CSS debería verse así ...
table
{
border:solid 1px red;
width:300px;
}
td
{
height:100px;
vertical-align:middle;
width:100%;
border:solid 1px green;
}
img
{
height:43px;width:43px;
vertical-align: middle;
}
Puedes ver el Fiddle de muestra ...
Simplemente añada vertical-align:middle; a tu estilo img?
Simplemente mueva su alineación vertical: centro del tramo a la imagen.
La imagen se alineará con el texto; Funciona mejor que lo contrario;)
img
{
height:43px;width:43px;
vertical-align:middle;
}
Solo puedes usar vertical-align: middle; a tu alcance
img
{
height:43px;width:43px;
display: inline;
vertical-align: middle;
}
span
{
vertical-align:middle;
display: inline;
}
Según el comentario
Puedes pensar como si a td se le da vertical-align: middle; ¿Entonces debería alinear todos los contenidos dentro de esto pero tener una imagen y un lapso en el que el navegador está entendiendo que la imagen es qué? : es este bloque en línea o en línea, por lo que necesita configurar la visualización: bloque en línea o en línea; Entonces puede ver que solo funciona aplicando la propiedad de visualización para la imagen. demo
Editar
img tag: source: display inline vs inline-block
Son elementos de "bloque" ya que tienen una anchura y una altura.
Es cierto, ambos son, o más precisamente, son elementos de "bloque en línea". Esto significa que fluyen en línea como texto, pero también tienen un ancho y alto como elementos de bloque.
Elementos reemplazados
Un elemento reemplazado es cualquier elemento cuya apariencia y dimensiones están definidas por un recurso externo. Los ejemplos incluyen imágenes (etiquetas), complementos (etiquetas) y elementos de formulario (, y etiquetas). Todos los demás tipos de elementos pueden denominarse elementos no sustituidos.
Los elementos reemplazados pueden tener dimensiones intrínsecas: valores de ancho y alto definidos por el propio elemento, en lugar de por su entorno en el documento. Por ejemplo, si un elemento de imagen tiene un ancho establecido en automático, se utilizará el ancho del archivo de imagen vinculado. Las dimensiones intrínsecas también definen una relación intrínseca que se utiliza para determinar las dimensiones calculadas del elemento, solo se debe especificar una dimensión. Por ejemplo, si solo se especifica el ancho para un elemento de imagen (a, digamos, 100px) y la imagen real tiene 200 píxeles de ancho y 100 píxeles de alto, la altura del elemento se escalará en la misma cantidad, a 50px.
Los elementos reemplazados también pueden tener requisitos de formato visual impuestos por el elemento, fuera del control de CSS; por ejemplo, la interfaz de usuario controla los elementos de formulario.
En un contexto de formato en línea, también puede pensar que un elemento reemplazado es uno que actúa como un solo personaje grande para los fines de ajuste y diseño. Se puede especificar un ancho y una altura para los elementos en línea reemplazados, en cuyo caso la altura de la caja de línea en la que se coloca el elemento se hace lo suficientemente alta como para acomodar el elemento reemplazado, incluidas las propiedades de caja especificadas.
solo agrega esta clase:
td *{
vertical-align:middle
}
Editar:
La pregunta es por qué, cuando se agrega una imagen al texto td va al final de la imagen y no más a la mitad de la imagen.
esta es mi respuesta:
cuando se establece td vertical-align en el middle , no se debe establecer todo el contenido en vertical-align en el middle , aún son de baseline . y cuando agrega una imagen al texto, la altura de la línea sube a la altura de la imagen y el texto es la parte inferior de esta altura, por lo que debe establecer vertical-align en el middle para solucionar este problema.
Aquí puedes ver lo que dije: DEMO
y lo siento por mi mal ingles
<style>
table
{
border:solid 1px red;
width:300px;
}
td
{
height:100px;
width:100%;
border:solid 1px green;
vertical-align:middle;
line-height:100px;
}
img
{
height:43px;width:43px;
vertical-align:middle;
}
</style>