Quiero alinear 3 imágenes en la misma fila en un div, la primera imagen debe estar alineado a la izquierda completa de la página, la tercera imagen debe estar alineado a la derecha completa de la página y la segunda imagen debe estar alineado en el centro exacto de la primera y tercera imágenes rd
he probado el siguiente código pero no funciona como yo quiero, ¿cómo alinear las 3 imágenes con la 2ª imagen exactamente en el centro de las otras 2 imágenes?
<div>
<img src="@Url.Content("~/images/image1.bmp")" alt="" align="left" />
<div id="content" align="center">
<img src="@Url.Content("~/images/image2.bmp")" alt="" align="center" />
</div>
<img src="@Url.Content("~/images/image3.bmp")" alt="" align="right"/>
</div>
<style type="text/css">
#content {
width:50%;
margin-left: auto ;
margin-right:auto ;
}
Opción 1:
En lugar de poner las imágenes dentro de div poner cada una de ellas dentro de un span.
Flotar la 1ª y 2ª imagen a la izquierda.
Dar un poco de relleno a la izquierda de la segunda imagen.
Flotar la imagen derecha a la derecha.
Recuerda siempre añadir overflow:hidden
al padre
Opción 2 (Preferida):
Esta será la mejor manera de asegurarse de que la segunda imagen está alineada con el centro siempre sin preocuparse por el ancho exacto de la tabla.
Algo como lo siguiente:
<table width="100%" border="0">
<tr>
<td><img src="@Url.Content("~/images/image1.bmp")" alt="" align="left" /></td>
<td><img src="@Url.Content("~/images/image2.bmp")" alt="" align="center" /></td>
<td><img src="@Url.Content("~/images/image3.bmp")" alt="" align="right"/></td>
</tr>
</table>
Esta debería ser su respuesta
<div align="center">
<img src="@Url.Content("~/images/image3.bmp")" alt="" align="right" style="float:right"/>
<img src="@Url.Content("~/images/image1.bmp")" alt="" align="left" style="float:left" />
<div id="content" align="center">
<img src="@Url.Content("~/images/image2.bmp")" alt="" align="center" />
</div>
</div>
He supuesto que el primer DIV es #content
:
<div id="content">
<img src="@Url.Content("~/images/image1.bmp")" alt="" />
<img src="@Url.Content("~/images/image2.bmp")" alt="" />
<img src="@Url.Content("~/images/image3.bmp")" alt="" />
</div>
Y CSS:
#content{
width: 700px;
display: block;
height: auto;
}
#content > img{
float: left; width: 200px;
height: 200px;
margin: 5px 8px;
}