how do I align text inside a header with images html?

Question

I am trying to align my images with the text so its in the middle in a line.

<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;
}

But still looks like this

Add the vertical alignment style to the images, not the `h2` — Mitya, Apr 28 '20 at 17:59
Does this answer your question? [Vertically align text next to an image?](https://stackoverflow.com/questions/489340/vertically-align-text-next-to-an-image) — Sidney Gijzen, Apr 28 '20 at 18:00

score 0 · Answer 1 · answered Apr 28 '20 at 18:10

Try to use flexible box model:

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

but is a better idea to put that inside a div and then create a css class for that:

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

how do I align text inside a header with images html?

1 Answers1