Как выровнять текст внутри заголовка с изображениями 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

Попробуйте использовать гибкую коробочную модель:

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

, но лучше поместить ее в div, а затем создать класс css для этого:

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