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 from 2012, some things are changed from that date, and since it still receives a lot of traffic from google, I feel like completing it 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 property, 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 {_x000D_
display: flex;_x000D_
}_x000D_
_x000D_
img {_x000D_
margin: 6px;_x000D_
}<div class="container">_x000D_
<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._x000D_
</div>A H4 elemental is a block display type element. You could force the H4 to have a inline display type, or simply use an inline element like P instead and style it however you require.
For reference: http://www.w3.org/TR/CSS21/visuren.html#propdef-display
So you'd change the display type of the H4 like:
<html>
<head>
<title>test</title>
<style type='text/css'>
h4 { display: inline }
</style>
</head>
<body>
<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>
</body>
</html>
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">_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>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.
try to insert your img inside your h4
DEMO
<h4 class='liketext'><img style='height: 24px; width: 24px; margin-right: 4px;' src='design/like.png'/>$likes</h4>
<h4 class='liketext'> <img style='height: 24px; width: 24px; margin-right: 4px;' src='design/dislike.png'/>$dislikes</h4>?
In this case you can use display:inline or inline-block.
Example:
img.likeordisklike {display:inline;vertical-align:middle; }_x000D_
h4.liketext { color:#F00; display:inline;vertical-align:top;padding-left:10px; }<img class='likeordislike' src='design/like.png'/><h4 class='liketext'>$likes</h4>_x000D_
<img class='likeordislike' src='design/dislike.png'/><h4 class='liketext'>$dislikes</h4>Don't use float:left because again need to write one more clear line and its old method also..
vertical-align: text-bottom;
Tested, this worked for me perfectly, just apply this to the image.
See example at: http://jsfiddle.net/6Rpkh/
<style>
img.likeordisklike { height: 24px; width: 24px; margin-right: 4px; }
h4.liketext { color:#F00; display:inline }
?</style>
<img class='likeordislike' src='design/like.png'/><h4 class='liketext'>$likes</h4>
<img class='likeordislike' src='design/dislike.png'/><h4 class='liketext'>$dislikes</h4>
?
Source: Stackoverflow.com