Align image and text properly in HTML

Question

This is the example:

I want to align the image along side with the name but somehow the image just floats up a little higher. Any help?

UPDATE:

#profile_name_header {
  background-color: #006400;
  font-family: Century Gothic;
  color: #FFFFFF;
  font-size: 20px;
  padding-bottom: 12px;
  padding-top: 12px;
  padding-left: 10px;
}

<div id="profile_name_header">
  <img src=< ?php echo "./img/".$genderprofile. ""; ?> style = "height:30px; margin-bottom:0px;" >
  <?php echo $fullname;  ?>'s Profile
</div>

Thank you.

Answer 1

Use vertical-align on the img since it's adjacent inline content.

img {
    vertical-align: middle;
}

<img src="https://lh4.googleusercontent.com/-EK1g7sBpX74/AAAAAAAAAAI/AAAAAAAAABU/AzsjRnL3mKk/photo.jpg?sz=32"> @Dranreb

A fancier way is to use flexbox, but it's overkill for your use case. If you wanted to do that, just give them a parent, and use align-items to affect vertical alignment.

div {
  display: flex;
  align-items: center;
}

<div>
  <img src="https://lh4.googleusercontent.com/-EK1g7sBpX74/AAAAAAAAAAI/AAAAAAAAABU/AzsjRnL3mKk/photo.jpg?sz=32"> @Dranreb
</div>