如何对齐父 div 两侧的子 div，CSS

Question

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

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

 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

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

这是 html 零件。 我删除了title class 的 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：你可以在这里查看

Answer 2

没关系，我修复了它：

。介绍 {

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

}