如何对齐父div，CSS的任一侧的子div

Question

我有两张图片需要在标题的两侧对齐，最好在页面边缘对齐。我尝试使用相对位置，但它不响应其他屏幕尺寸。 有人可以告诉我一个有效的方法吗？

目前是这样的，但我希望这两个图像位于标题的两侧。

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

没关系，我修复了它：

.介绍 {

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

}

Answer 2

您可以在父 div 中使用 display:flex 属性。我在下面对您的 html 和 css 代码进行了一些更改。

这里是html部分。我删除了具有 title 类的 div，因为如果您使用 display:flex，所有需要对齐的元素都应该相互分离

这里是 HTML 和 CSS 代码：

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

当您使用display:flex 时，所有项目都水平对齐。但我们想垂直对齐它们。所以我们需要使用flex-direction:column（默认为row）。为了使这些项目居中对齐，我们还需要align-items，因为它用于在垂直于主轴的交叉轴上对齐。

Codepen：you can check it here