Ver Mensaje Individual
  #1 (permalink)  
Antiguo 03/05/2011, 12:23
Avatar de maikel_system
maikel_system
 
Fecha de Ingreso: mayo-2011
Mensajes: 6
Antigüedad: 12 años, 10 meses
Puntos: 0
Pregunta Problema con menú horizontal

Muy buenas, me llamo Miguel y soy nuevo por aquí. Tengo un problema con el centrado de una lista en CSS.
Se trata de una lista de imágenes con un pie de foto asociado a cada uno. Las imágenes quiero que estén centradas verticalmente y a su vez los pies de imagen centrados con respecto a las mismas.

Pongo el código CSS y HTML por si me podéis echar una mano:

CSS

Código:
#novedades {
	height: 246px;
	width: 858px;
	background: black;
	border-top: 1px solid #FEC782;
	border-left: 1px solid #FEB154;
	border-right: 1px solid #FEB154;
	border-bottom: 1px solid #783C1C;
	overflow: hidden;
	text-align: center;
	margin: 0 auto;
	list-style:none; 
	padding:0; 
}

#novedades h1 {
	
	color: white;
}

#novedades ul {
	width: 858px;
	clear: both;
	overflow: hidden;
	margin: 0 auto;
	padding: 0;
	display: inline;
	text-align: center;
	list-style:none; 
}

#novedades ul li {
	width: 140px;
	float: left;
	text-align: center;
	display: inline; 
}

#novedades ul li a img {
	border: 3px solid #fff;
}

#novedades ul li a img:hover {
	border: 3px solid #FEE5C6;
}



#novedades ul li h2 {
	font: bold 11px arial, verdana, helvetica;
	margin-top: 10px;
	color: white;
}
HTML

Código HTML:
<html>

<head>
	<title>Título página</title>
	<link href="prueba.css" rel="stylesheet" type="text/css" />
</head>

<body>

<!-- Novedades -->
	
	<div id="novedades">
		<h1>Novedades</h1>
		<ul>

          <li>
            <a href="#"><img src="images/box01.jpg" width="105px" height="105px" alt="profile image" /></a> 
            <h2>profile name</h2>
          </li>

          <li>
            <a href="#"><img src="images/box02.jpg" width="105px" height="105px" alt="profile image" /></a> 
            <h2>profile name</h2>
          </li>

          <li>
            <a href="#"><img src="images/box03.jpg" width="105px" height="105px" alt="profile image" /></a> 
            <h2>profile name</h2>
          </li>

          <li>
            <a href="#"><img src="images/box04.jpg" width="105px" height="105px" alt="profile image" /></a> 
            <h2>profile name</h2>
          </li>

          <li>
            <a href="#"><img src="images/box05.jpg" width="105px" height="105px" alt="profile image" /></a> 
            <h2>profile name</h2>
          </li>

        </ul>
	</div>

</body>

</html> 
Gracias de antemano, un saludo!