i want to align 3 images in same row in a div, the 1st image should be aligned to complete left of page, the third image should be aligned to complete right of the page and the 2nd image should be aligned in exact center of 1st and 3 rd images
tried the below code but its diaplaying the way i want, how to align the 3 images with the 2nd image placed exactly in the center of the other 2 images?
<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 ;
}
This should be your answer
<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>
HTML:
<div class="container">
<span>
<img ... >
</span>
<span>
<img ... >
</span>
<span>
<img ... >
</span>
</div>
CSS:
.container{ width:50%; margin:0 auto; text-align:center}
.container span{ width:30%; margin:0 1%; }
I haven't tested this, but hope this will work.
You can add 'display:inline-block' to .container span to make the span to have fixed 30% width
Simply add the following CSS to the container element (here, the div
):
div {
display: flex;
justify-content: space-between;
}
div {_x000D_
display: flex;_x000D_
justify-content: space-between;_x000D_
}
_x000D_
<div>_x000D_
<img src="http://placehold.it/100x100" alt="" /> _x000D_
<img src="http://placehold.it/100x100" alt="" />_x000D_
<img src="http://placehold.it/100x100" alt="" />_x000D_
</div>
_x000D_
Use text-align: justify;
on the container element.
Then stretch the content to take up 100% width
<div>
<img src="http://placehold.it/100x100" alt="" />
<img src="http://placehold.it/100x100" alt="" />
<img src="http://placehold.it/100x100" alt="" />
</div>
div {
text-align: justify;
}
div img {
display: inline-block;
width: 100px;
height: 100px;
}
div:after {
content: '';
display: inline-block;
width: 100%;
}
div {_x000D_
text-align: justify;_x000D_
}_x000D_
_x000D_
div img {_x000D_
display: inline-block;_x000D_
width: 100px;_x000D_
height: 100px;_x000D_
}_x000D_
_x000D_
div:after {_x000D_
content: '';_x000D_
display: inline-block;_x000D_
width: 100%;_x000D_
}
_x000D_
<div>_x000D_
<img src="http://placehold.it/100x100" alt="" /> _x000D_
<img src="http://placehold.it/100x100" alt="" />_x000D_
<img src="http://placehold.it/100x100" alt="" />_x000D_
</div>
_x000D_
I assumed the first DIV is #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>
And CSS :
#content{
width: 700px;
display: block;
height: auto;
}
#content > img{
float: left; width: 200px;
height: 200px;
margin: 5px 8px;
}
Option 1:
Always remember to add overflow:hidden
to the parent (if you have one) of all the images because using floats with images have some side effects.
Option 2 (Preferred):
This will be the best way to make sure the 2nd image is alligned to the center always without worrying for the exact width of the table.
Something like below:
<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>
Source: Stackoverflow.com