Alineación horizontal de TXT y IMG en una lista

Computer XTress · #1 (**permalink**) 08/07/2007, 23:29

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

marcelomdsc · #2 (**permalink**) 09/07/2007, 01:42

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?

Computer XTress · #3 (**permalink**) 09/07/2007, 02:10

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!

ZMaster · #4 (**permalink**) 10/07/2007, 15:46

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

demiurgo_daemon · #5 (**permalink**) 10/07/2007, 15:54

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

Computer XTress · #6 (**permalink**) 10/07/2007, 19:00

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! :)