"Problema de alineaciones en div"

patiurco · #1 (**permalink**) 09/06/2011, 09:15

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<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>

C2am · #2 (**permalink**) 09/06/2011, 12:31

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.imagen{
float:left;
}

y en el html:

Código HTML:

Ver original<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>

emprear · #3 (**permalink**) 09/06/2011, 12:45

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

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>alinear</title>
</head>
<body>
<img src='cat-black.jpg' width="320" height="400"  alt="" style="float: left;border: solid 1px #000;"/>
<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;">
Descripción</div>
</body>
</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