CSS align images and text on same line

47

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!

This question is tagged with html css styles alignment image

~ Asked on 2012-11-28 02:31:46

The Best Answer is


52

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:

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

~ Answered on 2012-11-28 02:35:59


20

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.

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

~ Answered on 2018-09-28 06:35:57


Most Viewed Questions: