Colocar 3 imagenes juntas en horizontal

[Scape]

Hola, necesito colocar 3 imagenes juntas en horizontal, con unos 5pixeles de separación entre una y otra y un texto centrado dejado de cada una.

Como puedo hacerlo con css?

Gracias

[leinadMajestic]

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.

[Scape]

Iniciado por leinadMajestic

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.

Ah vale, con esto me vale, te lo agradezco mucho.

Un saludo