align 3 images in same row with equal spaces?

Question

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 ;


 }

Danield · Answer 1 · 2019-01-23T14:25:14.183

The modern approach: flexbox

Simply add the following CSS to the container element (here, the div):

div {
  display: flex;
  justify-content: space-between;
}

div {
  display: flex;
  justify-content: space-between;
}

<div>
 <img src="http://placehold.it/100x100" alt=""  /> 
 <img src="http://placehold.it/100x100" alt=""  />
 <img src="http://placehold.it/100x100" alt="" />
</div>

The old way (for ancient browsers - prior to flexbox)

Use text-align: justify; on the container element.

Then stretch the content to take up 100% width

MARKUP

<div>
 <img src="http://placehold.it/100x100" alt=""  /> 
 <img src="http://placehold.it/100x100" alt=""  />
 <img src="http://placehold.it/100x100" alt="" />
</div>

CSS

div {
    text-align: justify;
}

div img {
    display: inline-block;
    width: 100px;
    height: 100px;
}

div:after {
    content: '';
    display: inline-block;
    width: 100%;
}

div {
    text-align: justify;
}

div img {
    display: inline-block;
    width: 100px;
    height: 100px;
}

div:after {
    content: '';
    display: inline-block;
    width: 100%;
}

<div>
 <img src="http://placehold.it/100x100" alt=""  /> 
 <img src="http://placehold.it/100x100" alt=""  />
 <img src="http://placehold.it/100x100" alt="" />
</div>

Any way to get rid of the vertical space caused by the div:after content: '' part ? — AaronJ, Mar 13 '17 at 21:10

score 2 · Answer 2 · edited Jul 02 '13 at 09:29

Option 1:
- Instead of putting the images inside div put each one of them inside a span.
- Float 1st and 2nd image to left.
- Give some left padding to the 2nd image.
- Float the right image to right.

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):
- Put all the images inside a table with border="0".
- Make the width of the table 100%.

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>

this is not making the center image exactly between the other 2 images,this is making the 2nd image more close towards the left image — Harry, Jul 02 '13 at 09:34

Gokul Gopala Krishnan · Answer 3 · 2013-07-02T11:06:45.630

2

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

edited Jul 02 '13 at 11:06

answered Jul 02 '13 at 11:01

Gokul Gopala Krishnan

323
3
17

this is making the images to overlap on one another – Harry Jul 02 '13 at 12:02

score 1 · Answer 4 · answered Jul 02 '13 at 07:35

1

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>

answered Jul 02 '13 at 07:35

mohkhan

11,925
2
24
27

this is working fine for 1024 X 768 screen resolution, when im changing the resolution to 1280 X 800, the middle image is not coming exact in between the 2 images, its more towards teh left image – Harry Jul 02 '13 at 09:15

score 0 · Answer 5 · answered Jul 02 '13 at 07:40

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

align 3 images in same row with equal spaces?

5 Answers5

The modern approach: flexbox

The old way (for ancient browsers - prior to flexbox)

MARKUP

CSS

Linked