How to Align children div either side of parent div, CSS

Question

I've got two images that need to be aligned on either side of the title, preferable on the edges of the page. I tried to use position relative but it's not responsive to other screen sizes. Can someone show me an efficient way to do this, please?

Currently its like this, but i want the two images to be on either side of the title.

 title{ width: 100%; }.web{ font-size: 120px; }.js{ height: 230px; width: 240px; }.css{ height: 230px; width: 440px; }

 <div class="intro py-3 bg-white text-center"> <img class="js" src="images/js-flat.png" alt="js"> <div class="title"> <h2 class="web text-primary display-3 my-4">Wev Dev Quiz</h2> <img class="css" src="images/css2.png" alt="css"> </div> </div>

Answer 1

You can use display:flex property in your parent div. I did some changes of your html and css codes below.

Here is the html part. I deleted the div that has a title class because all elements that are needed to be align should be seperated each other if you use display:flex

Here is the HTML and CSS codes:

 .intro { display: flex; justify-content: center; flex-direction: column; align-items: center }.web{ font-size: 120px; }.js{ width: 240px; }.css{ width: 240px; }

 <div class="intro bg-white "> <img class="js" src="images/js-flat.png" alt="js"> <h2 class="web text-primary">Wev Dev Quiz</h2> <img class="css" src="images/css2.png" alt="css"> </div>

When you use display:flex all items are aligned as horizontally. But we want to align them vertically. So we need to use flex-direction:column (its default is row). To align these items center, we also need align-items because this is used to align in cross axis which is perpendicular to the main axis.

Codepen: you can check it here

Answer 2

never-mind, i fixed it with:

.intro {

 display: flex;
  justify-content: center;
  flex-direction: row;
  align-items: center

}