如何使用 CSS 將圖像和文本對齊到同一行的中心？

Question

我在一個網站上工作，但遇到了一個大問題。 我無法將同一行中的圖像和文本居中對齊。

我的 HTML 代碼：

 .title2 { text-align: center; font: normal normal bold 76px/87px Arial; letter-spacing: 0px; color: #4a4949; opacity: 1; padding-left: 15px; }.header { display: flex; align-items: center; flex-direction: row; }

 <div class="header"> <img src="img.png" width="200" height="150" > <h1 class="title2">Website</h1> </div>

現在他們在同一條線上，但不在中間。 你能幫我解決這個問題嗎？

Answer 1

添加justify-content: center; 在.header上

 .title2 { text-align: center; font: normal normal bold 76px/87px Arial; letter-spacing: 0px; color: #4a4949; opacity: 1; padding-left: 15px; }.header { display: flex; align-items: center; flex-direction: row; justify-content: center; }

 <div class="header"> <img src="img.png" width="200" height="150" > <h1 class="title2">Website</h1> </div>

Answer 2

您是否嘗試過設置margin: auto; 對於.header div？ 不過，這將要求您設置width 。 對於內容，添加text-align: center;

Answer 3

在您的 CSS 文件中，將其添加到.header中。 justify-content: center; 這將解決您的問題。