如何將 header 中的文本與圖像 html 對齊？

Question

我正在嘗試將我的圖像與文本對齊，使其位於一行的中間。

<div id="bar">
      <h2><img src="images/java.png" alt="logo">Java<img src="images/c++.png" alt="logo">C/C++<img src="images/unity.png" alt="logo">Unity<img src="images/sql.png" alt="logo">SQL<img src="images/html.png" alt="logo">HTML<img src="images/css.png" alt="logo">CSS<img src="images/python.png" alt="logo">Python</h2> 
  </div>

#bar h2{
    vertical-align: middle;
}

但是看起來還是這樣

Answer 1

嘗試使用柔性盒 model：

#bar h2 { 
  display: flex; 
  flex-diretion:row; 
  justify-content: center; 
  align-items:center;
}

但最好將其放入 div 中，然后為此創建 css class ：

.languages-bar {
  display: flex; 
  flex-diretion:row; 
  justify-content: center; 
  align-items:center;
}