CSS align images and text on same line

Question

I have been searching and trying different methods for hours now. I just can't seem to get these two images and text all on one line. I want both the images and both text to all be on one line arranged image, text, image, text My images are coded like this with simple styles attacted

 <img style='height: 24px; width: 24px; margin-right: 4px;' src='design/like.png'/><h4 class='liketext'>$likes</h4>  <img style='height: 24px; width: 24px; margin-right: 4px;' src='design/dislike.png'/><h4 class='liketext'>$dislikes</h4> 

My "liketext" class is just has a simple text color modifier. With this code the first image and text are on the same line, and the the next image and text is on the line below. I want all four objects to be on the same line. I really have tried to solve this question on my own and appreciate any help given and hopefully this post can help others as well thank you!

Answer 1

You can either use (on the h4 elements, as they are block by default)

display: inline-block; 

Or you can float the elements to the left/rght

float: left; 

Just don't forget to clear the floats after

clear: left; 

---

More visual example for the float left/right option as shared below by @VSB:

<h4>       <div style="float:left;">Left Text</div>      <div style="float:right;">Right Text</div>      <div style="clear: left;"/>  </h4>

Answer 2

You can simply center the image and text in the parent tag by setting

div {      text-align: center; } 

vertical center the img and span

img {      vertical-align:middle; } span {      vertical-align:middle; } 

You can just add second set below, and one thing to mention is that h4 has block display attribute, so you might want to set

h4 {     display: inline-block } 

to set the h4 "inline".

The full example is shown here.

<div id="photo" style="text-align: center">    <img style="vertical-align:middle" src="https://via.placeholder.com/22x22" alt="">    <span style="vertical-align:middle">Take a photo</span>  </div>