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 display flex , justify-content center and align-items center as like this

Demo

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

<div class="flex_img">
    <div class="left">
        <img src="images/left_image.jpg" width="160" height="200" /> 
    </div>
    <div class="right">
        <img src="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>

<div class='flex_img'>
    <div class='centerimg'>
        <img src="images/left_image.jpg" width="460" height="300" /> 
    </div>
    <div class='centerimg'>
        <img src="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;
}

<div class="containner">
    
        <img src="images/left_image.jpg" width="100" height="100" /> 
    
        <img src="images/right_image.jpg" width="100" height="100" />
       
</div>

Share