如何對齊父 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

}