Una imagen desalinea el resto de columnas

wesse · #1 (**permalink**) 07/12/2011, 05:25

Hola.
Tengo tres columnas de texto y todo se alinea arriba, pero si en la tercera inserto una imagen en lugar de texto, el texto de la col1 y col2 baja para alinearse a la base de la imagen de la col3.
¿Porqué ocurre esto?

Os dejo el código:

Código HTML:

<head>
<style type="text/css">
<!--
#contenedor {
width: 900px;
margin: auto;
padding:0;
display: table;
}
#izquierda {
width:150px;
padding:0px;
display: table-cell;
}
#derecha{
width:250px;
padding:0px;
display: table-cell;
text-align: center;
}
#central{
width:500px;
padding: 0px;
display: table-cell;
text-align: center;
}
-->
</style>
</head>
<body>
<div id="contenedor"> 
    <div id="izquierda"> 
      <div> ... </div>
    </div>
    <div id="central"> 
      <div> ... </div>
    </div>
    <div id="derecha"> 
    <img src="imagen.jpg" width="30" height="200">
    </div>
</div>
</body>
</html>

emprear · #2 (**permalink**) 07/12/2011, 05:53

En realidad cuando no hay imagen, no es que se alineen arriba, es que no tenes altura, al poner la img con height 200, se ubican con la alineación vertical por defecto que es baseline.
para volverlo a poner "arriba" tenes que darle a la imagen

Código CSS:

Ver originalimg{
vertical-align: text-top;
}

hacé esta prueba, quita la imagen, pone un texto y en tu css agrega

Código CSS:

Ver original#izquierda, #derecha, #central {
border: solid 1px #000;
}

vas a ver que no estan ni arriba ni abajo ni en el centro, los textos se ubican en el espacio que tienen

Saludos

kseso? · #3 (**permalink**) 07/12/2011, 08:18

No se la razón por la que declara para sus cajas el valor table/table-cell
La alineación que tiene es la lógica y la que debe, pues el valor por defecto para la alineación vertical en las cajas con table-cell es bottom.

Así que o bien suprime (si puede) esos valores para display o añade a su css:

Código CSS:

Ver original#izquierda, #derecha, #central {
   vertical-align: top;
}

wesse · #4 (**permalink**) 07/12/2011, 09:43

kseso gracias, eso me ha solucionado el problema. lo del table-cell es para la maquetación en 3 columnas.

emprear gracias tb por tu ayuda.