Foros del Web » Creando para Internet » CSS »

"Problema de alineaciones en div"

Estas en el tema de "Problema de alineaciones en div" en el foro de CSS en Foros del Web. Hola a todos bue dia, tengo un problema al alinear un texto y una imagen dentro de un mismo div. Lo que quiero es alinear ...
  #1 (permalink)  
Antiguo 09/06/2011, 10:15
 
Fecha de Ingreso: mayo-2011
Ubicación: Toluca
Mensajes: 115
Antigüedad: 5 años, 7 meses
Puntos: 2
"Problema de alineaciones en div"

Hola a todos bue dia, tengo un problema al alinear un texto y una imagen dentro de un mismo div. Lo que quiero es alinear el texto en medio y la imagen a la izquierda, pero ya intente mil cosas y sale en medio todo, o la imagen encima del texto etc. Aguna sugerencia:

Asi tengo mi div ahorita:

Código otro:
Ver original
  1. <div style='background-color:Dimgray;color:white;text-align: center;height: 5px;font-size:21px;vertical-align:middle'><img src='7.jpg'/>Reporte de productos</div>
  #2 (permalink)  
Antiguo 09/06/2011, 13:31
Avatar de C2am  
Fecha de Ingreso: enero-2009
Ubicación: Rosario, Argentina
Mensajes: 2.005
Antigüedad: 8 años
Puntos: 306
Respuesta: "Problema de alineaciones en div"

Si quieres alinear el texto en medio de un div (tanto en ancho como en alto), si no me equivoco el vertical-align:middle solo funciona para elementos de linea y no de bloque como es el div. (si es una burrada lo que digo, pido las disculpas del caso, pero así lo habia entendido yo). En ese caso puedes transformar ese div mediante display:inline

http://www.librosweb.es/css/capitulo6/texto1.html
http://www.librosweb.es/referencia/css/display.html

Para ubicar la imagen a la izquierda, puedes hacerlo mediante el estilo para la imagen, flotandola a la izquierda por ejemplo.
Es decir:
Código CSS:
Ver original
  1. .imagen{
  2. float:left;
  3. }
y en el html:
Código HTML:
Ver original
  1. <div style='background-color:Dimgray;color:white;text-align: center;height: 5px;font-size:21px;vertical-align:middle'><img src='7.jpg' class="imagen"/>Reporte de productos</div>
__________________
El mundo nada puede contra un hombre que canta en la miseria.
-- Ernesto Sábato--
  #3 (permalink)  
Antiguo 09/06/2011, 13:45
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 9 años, 6 meses
Puntos: 1567
Respuesta: "Problema de alineaciones en div"

Asi como lo haces no vas a ninguna parte
Porá con esto

Código HTML:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2.    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  5. <title>alinear</title>
  6. </head>
  7. <img src='cat-black.jpg' width="320" height="400"  alt="" style="float: left;border: solid 1px #000;"/>
  8. <div style="float: left; width:320px; height: 400px;border: solid 1px #000;text-align:center; vertical-align: middle; line-height: 400px; font-family: arial,verdana,serif; font-size:22pt;">
  9. Descripción</div>
  10. </body>
  11. </html>


Tenés que definir los altos y anchos

Demo
http://foros.emprear.com/css/alinear.html

y es recomendable que pases los styles a css

Saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.

Etiquetas: Ninguno
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 06:33.