How to centre two images next to each other in css/html

Question

I am fairly new to html and css, and I was trying to make two images go side by side in the center of the screen (automatically adjusting themselves when the screen is scaled).

I have only been able to get the two images to go next to each other and not been able to center them or make them automatically scale.

<head>
<style>
* {
  box-sizing: border-box;
}

.column {
  float: left;
  width: 33.33%;
  padding: 5px;
}

.row::after {
  clear: both;
  display: table;
}
</style>
</head>
<body>

<div class="row">
  <div class="column">
    <img src="img_snow.jpg" alt="Snow" style="width:100%">
  </div>
  <div class="column">
    <img src="img_forest.jpg" alt="Forest" style="width:100%">
  </div>
  <div class="column">
    <img src="img_mountains.jpg" alt="Mountains" style="width:100%">
  </div>
</div>

</body>
</html>

The two images should go next to each other in the centre of the screen, scaling themselves on different sized browser windows and when browser is zoomed in or out. I should be able to change the size of the images to what I need.

I got help from https://stackoverflow.com/questions/17188455/how-to-center-multiple-divs-inside-a-container-in-css/17188752 check the ans from George — Masih Ansari, Jan 04 '19 at 10:20

score 1 · Answer 1 · answered Jan 04 '19 at 10:33

Here is a way to do it with flexbox

JSFiddle demo here

* {
  height: 100%;
}

img {
  display: block;
  height: auto;
  max-width: 100%;
}

.images {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: auto 0;
  padding: 0 200px;
}

@media screen and (max-width: 768px) {
  .images {
    flex-direction: column;
    padding: 0;
  }
}

<div class="images">
  <img src="https://placekitten.com/600/400">
  <img src="https://placekitten.com/600/400">
</div>

score 0 · Answer 2 · answered Jan 04 '19 at 10:23

0

Add the following css-

body
{
text-align:center;
}

.row
{
display:inline-block;
}

answered Jan 04 '19 at 10:23

ellipsis

12,049
2
17
33

Anuj Gupta · Answer 3 · 2019-01-04T10:38:02.543

I hope this will help you.

<html>


 <head>
      <style>
         * {
         box-sizing: border-box;
         }
         .ul_class {
         width: 100%;
         display:block;
         text-align: center;
         }
         .li_class {
         width: 33.33%;
         display:inline-block;
         margin-right: -4px;
         }
      </style>
   </head>
   <body>
      <ul class="ul_class">
         <li class="li_class"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTpVNXBVaIl8ne-AYJfYxls2Js2dcYJohl5e-d3ompbZxrjtzlk" alt="Snow" style="width:100%"></li>
         <li class="li_class"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTpVNXBVaIl8ne-AYJfYxls2Js2dcYJohl5e-d3ompbZxrjtzlk" alt="Snow" style="width:100%"></li>
      </ul>
   </body>
</html>

Please take time to explain why this solution answers the question. We are here to educate people, not just throw unexplained code at them. — James Whiteley, Jan 04 '19 at 10:33

score 0 · Answer 4 · answered Jan 04 '19 at 10:39

0

Use below code in your css.

OR You can use flex. check below link. https://www.w3schools.com/cssref/css3_pr_justify-content.asp

.row{ width:80%; margin:0 auto; }

answered Jan 04 '19 at 10:39

Xenio Gracias

2,728
1
9
16

score 0 · Answer 5 · answered Jan 04 '19 at 10:40

0

try using flex on the row element

.row {   
    display: flex;
    justify-content: center;
    align-items: center;
}

answered Jan 04 '19 at 10:40

Lukáš Gibo Vaic

3,960
1
18
30

How to centre two images next to each other in css/html

5 Answers5