CODEWITHSUNDEEP
htmlcss
Ooze
Ooze

Reputation: 21

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:

<div class="flex_img">
    <div class="left">
        <img src="images/left_image.jpg" width="460" height="300" /> 
    </div>
    <div class="right">
        <img src="images/right_image.jpg" width="460" height="300" />
       </div>
     </div>

css:

.flex_img{align-items: center;}

Upvotes: 0

Views: 1156

Answers (4)

mim
mim

Reputation: 41

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>

Upvotes: 0

narendra.lodhi
narendra.lodhi

Reputation: 91

you can try this flow code. This is the optimized solution.

.flex_img{display: flex; justify-content: center;}


<div class="flex_img">
<div class="left"> <img src="images/left_image.jpg" width="460" height=
  "300" /> </div>
<div class="right"> <img src="images/right_image.jpg" width="460"
  height="300" /> </div>
</div>

Upvotes: 1

Matt
Matt

Reputation: 2869

<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.

Upvotes: 0

Rohit Azad Malik
Rohit Azad Malik

Reputation: 32182

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;

Upvotes: 0

Related Questions