How to centralize a div with pictures

Question

I am totally a newbie when it comes to coding. I have a div with 4 pictures in it. I want the div to be centralize but I can´t make it happen. If I manage to centralize, they are not aligned any more (horizontal). How do I do this? I´ve tried everything, justify-content, display, position, align-items and so on. Where do I go wrong?

What code do I use to put the boxes in the center, just as they are, horizontal?

Thanks for you´re help!

here is how I do it. put a wrapper div and give it a class of container `.container{ width:100%; display:flex; justify-content:center; align-items:center; flex-wrap:wrap; } ` — Skeptical Ant, Feb 10 '21 at 09:00

score 0 · Answer 1 · edited Feb 10 '21 at 09:05

.wrapper {border: 1px solid #678596; max-width: 350px; margin: 30px auto;} 
      
.parentClass { display: flex;  justify-content:center;}
      
.parentClass div {margin: 5px; background: #678596; width: 50px; height: 50px; line-height: 50px; text-align: center; font-size: 30px; color: #fff;}

<div class="wrapper">

<div class="parentClass">
  <div>1</div>
  <div>2</div>
  <div>3</div>  
</div>

</div>

How to centralize a div with pictures

1 Answers1