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!

Solution 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>

Solution 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>

Solution 3

This question is from 2012, some things have changed from that date, and since it still receives a lot of traffic from google, I feel like completing it by adding flexbox as a solution.

By now, flexbox is the advised pattern to be used, even if it lacks IE9 support.

The only thing you have to care about is adding display: flex in the parent element. As default and without the need of setting other properties, all the children of that element will be aligned in the same row.

If you want to read more about flexbox, you can do it here.

.container {
  display: flex;
}

img {
  margin: 6px;
}

<div class="container">
  <img src="https://placekitten.com/g/300/300" /> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

Solution 4

vertical-align: text-bottom;

Tested, this worked for me perfectly, just apply this to the image.

Solution 5

First, I wouldn't recommend using inline styles. If you must, you should try applying floats to each item:

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

It might require some tweaking afterwards, and clearing the floats.

View more solutions