Centering Two Images Horizontally Aligned In A Single Div

I'm trying to get two images next to each other horizontally and in the centre of the page. I can't seem to get this to work, this is my fourth attempt. html:

Copy

Solution 2:

Hi now you can try to this css

Define displayflex , justify-contentcenter and align-itemscenter as like this

Demo

.flex_img{display: flex;
justify-content: center; /* align horizontal */align-items: center; height:400px;border:solid 1px red;}

<divclass="flex_img"><divclass="left"><imgsrc="images/left_image.jpg"width="160"height="200" /></div><divclass="right"><imgsrc="images/right_image.jpg"width="160"height="200" /></div></div>

For cross-browser compatibility

display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
-webkit-justify-content: center;
-ms-justify-content: center;
justify-content: center;

Solution 3:

<style>.centerimg
{
    float:left;
}
.flex_img
{
  align-items: center;
  display: flex;
  justify-content: center;
}
</style><divclass='flex_img'><divclass='centerimg'><imgsrc="images/left_image.jpg"width="460"height="300" /></div><divclass='centerimg'><imgsrc="images/left_image.jpg"width="460"height="300" /></div></div>

This will center two images next to each other horizontally on a page but isn't supported by older browsers.

Solution 4:

before use of flex property you must know it's limitations.

copy this code and run on browser(only latest version) and this will run perfectly as you wanted.

.containner{display: flex;
justify-content: center; /* align horizontal */align-items: center; /* for center of your page */height:100%; /* give it's height*/
}
img {                           /* optional  */background-color:orange;
}

<divclass="containner"><imgsrc="images/left_image.jpg"width="100"height="100" /><imgsrc="images/right_image.jpg"width="100"height="100" /></div>

Share