如何对齐父 div 两侧的子 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

}