Foros del Web » Creando para Internet » CSS »

Una imagen desalinea el resto de columnas

Estas en el tema de Una imagen desalinea el resto de columnas en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 07/12/2011, 05:25
Avatar de wesse  
Fecha de Ingreso: junio-2003
Ubicación: España
Mensajes: 577
Antigüedad: 18 años
Puntos: 1
Una imagen desalinea el resto de columnas

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> 
  #2 (permalink)  
Antiguo 07/12/2011, 05:53
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 14 años
Puntos: 1567
Respuesta: Una imagen desalinea el resto de columnas

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 original
  1. img{
  2. vertical-align: text-top;
  3. }
hacé esta prueba, quita la imagen, pone un texto y en tu css agrega
Código CSS:
Ver original
  1. #izquierda, #derecha, #central {
  2. border: solid 1px #000;
  3. }
vas a ver que no estan ni arriba ni abajo ni en el centro, los textos se ubican en el espacio que tienen

Saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #3 (permalink)  
Antiguo 07/12/2011, 08:18
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 14 años
Puntos: 539
Respuesta: Una imagen desalinea el resto de columnas

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
  1. #izquierda, #derecha, #central {
  2.    vertical-align: top;
  3. }
  #4 (permalink)  
Antiguo 07/12/2011, 09:43
Avatar de wesse  
Fecha de Ingreso: junio-2003
Ubicación: España
Mensajes: 577
Antigüedad: 18 años
Puntos: 1
Respuesta: Una imagen desalinea el resto de columnas

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.

Etiquetas: columnas, html, resto
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 12:01.