[Ovillo] Centrar varias imagenes en linea en un div

Dom Feb 25 16:49:42 UTC 2007

Hola lo más semanticamente correcto sería que los tratases como una lista
cada una de las imagenes como un item de la lista (li) ,.....

El xhtml sería así

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="liststyle.css"/>
<title>listas para imagenes</title>
</head>
<body>
<ul>
<li id="one">
<h3><a href="#">Primer item<img src="web_020.jpg" alt="" /></a></h3>
<p>Lorem ipsum dolor sit amet.</p>
</li>
<li id="two">
<h3><a href="#">Segundo item<img src="web_021.jpg" alt="" /></a></h3>
<p>Lorem ipsum dolor sit amet.</p>
<li id="three">
<h3><a href="#">Tercer item<img src="web_022.jpg" alt="" /></a></h3>
<p>Lorem ipsum dolor sit amet.</p>
</ul>
</body>
</html>

Y el estilo (liststyle.css) sería :

h3 { margin : 0 10px;
padding : .5em 0 0 0;
font-size : 100%; }

p { margin : 0 10px;
padding : 0 0 .5em 0; }

ul { list-style-type : none;
width : 780px;
margin : 0;
padding : 0;
border-top : 20px solid #90305c; }

ul:after { content : ".";
display : block;
height : 0;
clear : both;
visibility : hidden; }

li { position : relative;
float : left;
width : 260px;
padding : 2em 0; }

li#one { background : #e4ccd7 ; }
li#two { background : grey; }
li#three { background : #e4ccd7; }

h3 img { float : right; }

Espero que te sirva :)
Salu2..........