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