La forma mas facil, es usar divs, tengo una pregunta
Las imagenes son de un tamaño fijo y las tres son iguales??
Que tamaño tienes pensado para contener las 3 imagenes?
Ahora lo puedes hacer asi
<div id="contenedor_principal">
<!--Primera Imagen-->
<div class="contenedor_imagen_texto">
<div class="imagen"><img src="ruta/de/la/imagen"></div>
<div class="texto">Texto debajo de la imagen</div>
</div>
<!--Segunda Imagen-->
<div class="contenedor_imagen_texto">
<div class="imagen"><img src="ruta/de/la/imagen"></div>
<div class="texto">Texto debajo de la imagen</div>
</div>
<!--tercera Imagen-->
<div class="contenedor_imagen_texto">
<div class="imagen"><img src="ruta/de/la/imagen"></div>
<div class="texto">Texto debajo de la imagen</div>
</div>
</div>
La definicion de los estilos, independientemente de donde los hagas, seria algo asi
#contenedor_principal{
width:1024px;
height:auto;
position:relative;
margin:auto;
}
.contenedor_imagen_texto{
width:335px;
height:auto;
position:relative;
display:inline-block;
vertical-align:top;
overflow:hidden;
}
.imagen, .texto{
width:100%;
height:auto;
position:relative;
display:inline;
}
.texto{
height:auto;
text-align:center
}
de esta forma puedes tener sin problemas las 3 imagenes y debajo un texto, ahora esto funciona para imagenes con un tamaño de 335px x npx es decir, que si tienes una imagen mas grande, lo unico que va a pasar es que no va a verse completa.
Prueba y haz tus experimentos.