Foros del Web » Creando para Internet » CSS »

Alineación horizontal de TXT y IMG en una lista

Estas en el tema de Alineación horizontal de TXT y IMG en una lista en el foro de CSS en Foros del Web. Hola a todos! Tengo la siguiente lista: <div style="height: 30px";> <ul> <li>Texto dentro de la lista</li> <li><img src="xx" width="100" height="20" alt="" /></li> </ul> </div> La ...
  #1 (permalink)  
Antiguo 09/07/2007, 00:29
 
Fecha de Ingreso: diciembre-2004
Mensajes: 721
Antigüedad: 13 años
Puntos: 2
Alineación horizontal de TXT y IMG en una lista

Hola a todos!

Tengo la siguiente lista:

<div style="height: 30px";>
<ul>
<li>Texto dentro de la lista</li>
<li><img src="xx" width="100" height="20" alt="" /></li>
</ul>
</div>

La lista tiene display: inline;.

Necesito que tanto el texto como la imagen se alinien HORIZONTALMENTE al centro de la div, como cuando haciamos un "valign: middle;" con las tablas. El problema es que al poner una imagen el texto se posiciona a partir del BOTTOM de la imagen y no encuentro forma de que que quede CENTRADO al "middle" de la imagen...

¿Alguno sabe cómo hacer esto? Si no quedo bien explicado puedo poner imagenes para dar alguna idea!

Saludos y gracias!!
  #2 (permalink)  
Antiguo 09/07/2007, 02:42
Avatar de marcelomdsc  
Fecha de Ingreso: junio-2007
Ubicación: Windsor, California.
Mensajes: 706
Antigüedad: 10 años, 6 meses
Puntos: 8
Re: Alineación horizontal de TXT y IMG en una lista

si, pone las imagenes por favor.

Cita:
no encuentro forma de que que quede CENTRADO al "middle" de la imagen..
El texto va a estar sobre la imagen?
__________________
ginkgo.com.uy
  #3 (permalink)  
Antiguo 09/07/2007, 03:10
 
Fecha de Ingreso: diciembre-2004
Mensajes: 721
Antigüedad: 13 años
Puntos: 2
Re: Alineación horizontal de TXT y IMG en una lista

Aquí hay un ejemplo:



ARRIBA se ve cómo aparece.... la IMAGEN ocupa el 100% de alto y ancho del elemento (LI). En el LI siguiente, el texto aparece desde lo que sería el OFFSET de la imagen. Desde el "PISO" de la imagen. Y no tengo forma de ajustarlo horizontalmente al CENTRO.

Encontre la propiedad "vertical-align: middle;" pero no funciona bien entre los diferentes browsers :(

¿Como se hacen normalmente esto sin usar tablas?

Gracias, un saludo!
  #4 (permalink)  
Antiguo 10/07/2007, 16:46
Avatar de ZMaster  
Fecha de Ingreso: septiembre-2005
Mensajes: 47
Antigüedad: 12 años, 3 meses
Puntos: 0
De acuerdo Re: Alineación horizontal de TXT y IMG en una lista

Hola! la manera que estás haciéndolo talvez no sea la más adecuada.
Lo que debés hacer es:

#sectionbox {
width: 250px;
padding: 0px 0px 25px 0px;
clear:both;
overflow:auto;
}

#sectionbox img {
float: left;
}
#sectionbox p {
float: left;
width: 145px;
line-height: 16px;
padding: 10px 0 10px 10px;
}

Lo explico: dentro del DIV mete tu imagen y el texto en un párrafo asi lo convertís en una caja con "#sectionbox p" la p de párrafos. Solo juega con el padding arriba, abajo y ahi lo solucionas. Fijate que ambos imagen y texto se hacen flotar al lado izquierdo.

Espero te ayude...!
  #5 (permalink)  
Antiguo 10/07/2007, 16:54
Avatar de demiurgo_daemon  
Fecha de Ingreso: diciembre-2006
Ubicación: Querétaro
Mensajes: 184
Antigüedad: 11 años
Puntos: 2
Re: Alineación horizontal de TXT y IMG en una lista

Hola,

quiero imaginarme que usas la imagen como una especie de viñeta para tu lista. Si es así, puedes usar una solución más fácil:

Código:
li {
float: left;
list-style-image: url(imagen.jpg);
}
saludos
  #6 (permalink)  
Antiguo 10/07/2007, 20:00
 
Fecha de Ingreso: diciembre-2004
Mensajes: 721
Antigüedad: 13 años
Puntos: 2
Re: Alineación horizontal de TXT y IMG en una lista

HolaHola! Gracias por sus respuestas. Al final lo resolvi de otra forma... (me acorde de que una vez leí un articulo en a-list-appart que hablaba sobre cuando usar <LI> con "display: inline;" y cuando usarlas con "float: left;" ... Lo explico super por arriba...

Si vas a hacer solo una tira HORIZONTAL, usa "float: left;", si vas a quere varias lineas / columnas, "display: inline;"


Aquí les dejo un codigo de lo que quería hacer y logré (metan una imagen de 30x30 :] )

Código HTML:
<!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="en" lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="description" content="Back End" />
<meta name="author" content="Eduardo G. Rajo" />
<meta name="keywords" content="" />
<meta name="copyright" content="2007 - EGR" />

<title>Back End v0.1</title>

<link rel="shortcut icon" href="" />
<link rel="stylesheet" type="text/css" href="../css/main2.css" />

<!-- <script src="../js/.js" type="text/javascript" language="javascript1.2"></script> -->

<style type="text/css">
UL {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

UL LI {
	margin: 0;
	padding: 0;
	height: 40px;
	background-color: gray;
	border: 1px black solid;
	float: left;
	line-height: 40px;
	overflow: hidden;
}

UL LI IMG {
	margin-top: 5px;
}

</style>

</head>
<body>

	<ul>
		<li><b>Campo 1</b></li>
		<li><i>Campo 2</i></li>
		<li><img src="image4ee.jpg" width="30" height="30" alt="" /></li>
		<li><span>Texto texto texto texto texto</span></li>
		<li><b>Campo 3</b></li>
		<li><i>Campo 4</i></li>
	</ul>

	<br style="clear: both;" />


</body>
</html> 
Un saludo grande y gracias! :)
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 17:17.