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     lt img style  height  24px  width  24px  margin-right  4px   src  design like png   gt  lt h4 class  liketext  gt  likes lt  h4 gt    lt img style  height  24px  width  24px  margin-right  4px   src  design dislike png   gt  lt h4 class  liketext  gt  dislikes lt  h4 gt    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

User · Answer

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>

User · Answer

In this case you can use display inline or inline-block   Example    x000D   x000D  img likeordisklike  display inline vertical-align middle     x000D  h4 liketext   color  F00  display inline vertical-align top padding-left 10px    x000D   lt img class  likeordislike  src  design like png   gt  lt h4 class  liketext  gt  likes lt  h4 gt  x000D   lt img class  likeordislike  src  design dislike png   gt  lt h4 class  liketext  gt  dislikes lt  h4 gt  x000D   x000D   x000D    Don t use float left because again need to write one more clear line and its old method also

User · Answer

See example at  http   jsfiddle net 6Rpkh    lt style gt  img likeordisklike   height  24px  width  24px  margin-right  4px    h4 liketext   color  F00  display inline     lt  style gt    lt img class  likeordislike  src  design like png   gt  lt h4 class  liketext  gt  likes lt  h4 gt   lt img class  likeordislike  src  design dislike png   gt  lt h4 class  liketext  gt  dislikes lt  h4 gt

User · Answer

try to insert your img inside your h4 DEMO   lt h4 class  liketext  gt  lt img style  height  24px  width  24px  margin-right  4px   src  design like png   gt  likes lt  h4 gt   lt h4 class  liketext  gt   lt img style  height  24px  width  24px  margin-right  4px   src  design dislike png   gt  dislikes lt  h4 gt

User · Answer

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    x000D   x000D   container   x000D    display  flex  x000D    x000D   x000D  img   x000D    margin  6px  x000D    x000D   lt div class  container  gt  x000D     lt img src  https   placekitten com g 300 300    gt  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   lt  div gt  x000D   x000D   x000D

User · Answer

First  I wouldn t recommend using inline styles  If you must  you should try applying floats to each item    lt img style  float left  height  24px  width  24px  margin-right  4px   src  design like png   gt   lt h4 style  float left   class  liketext  gt  likes lt  h4 gt   lt img style  float left  height  24px  width  24px  margin-right  4px   src  design dislike png   gt   lt h4 style  float left   class  liketext  gt  dislikes lt  h4 gt    It might require some tweaking afterwards  and clearing the floats

User · Answer

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   lt h4 gt   x000D       lt div style  float left   gt Left Text lt  div gt  x000D       lt div style  float right   gt Right Text lt  div gt  x000D       lt div style  clear  left    gt  x000D   lt  h4 gt  x000D   x000D   x000D

User · Answer

vertical-align  text-bottom    Tested  this worked for me perfectly  just apply this to the image

User · Answer

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   lt div id  photo  style  text-align  center  gt  x000D     lt img style  vertical-align middle  src  https   via placeholder com 22x22  alt    gt  x000D     lt span style  vertical-align middle  gt Take a photo lt  span gt  x000D   lt  div gt  x000D   x000D   x000D

[html] CSS align images and text on same line

Examples related to html

Examples related to css

Examples related to styles

Examples related to alignment

Examples related to image