CSS alinear imágenes y texto en la misma línea

He estado buscando y probando diferentes métodos durante horas. Parece que no puedo conseguir estas dos imágenes y texto en una sola línea. Quiero que tanto las imágenes como el texto estén todos en una línea arreglada imagen, texto, imagen, texto Mis imágenes están codificadas de esta manera con estilos simples 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>

Mi clase "liketext" solo tiene un modificador de color de texto simple. Con este código, la primera imagen y el texto están en la misma línea, y la siguiente imagen y el texto están en la línea de abajo. Me quiero que los cuatro objetos estén en la misma línea. Realmente he tratado de resolver esta pregunta por mi cuenta y aprecio cualquier ayuda dada y espero que este post pueda ayudar a otros también gracias!

Author: Keith Drake Waggoner, 2012-11-28
Source

9 answers

Puede usar (en los elementos h4, ya que son bloques por defecto) 

display: inline-block;

O puede flotar los elementos a la izquierda/rght

float: left;

Simplemente no te olvides de limpiar las carrozas después de 

clear: left;

Más ejemplo visual para la opción flotante izquierda / derecha como se comparte a continuación por @VSB: 

<h4> 
    <div style="float:left;">Left Text</div>
    <div style="float:right;">Right Text</div>
    <div style="clear: left;"/>
</h4>
 39
Author: Adrift,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-11-27 16:40:26

Primero, no recomendaría usar estilos en línea. Si es necesario, debe tratar de aplicar flotadores a cada elemento:

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

Podría requerir algunos ajustes después, y la limpieza de los flotadores.

 3
Author: David Morgan,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-11-28 02:42:46

Ver ejemplo en: 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>

​

 3
Author: sinisterfrog,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-11-28 02:46:06

Un elemental H4 es un elemento de tipo de pantalla de bloque. Puede forzar el H4 para que tenga un tipo de pantalla en línea, o simplemente usar un elemento en línea como P en su lugar y darle el estilo que necesite.

Para referencia: http://www.w3.org/TR/CSS21/visuren.html#propdef-display

Así que cambiarías el tipo de visualización del H4 como: 

<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>
 2
Author: trev,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-11-28 02:48:27

En este caso puede utilizar display:inline o inline-block.

Ejemplo:

img.likeordisklike {display:inline;vertical-align:middle;  }
h4.liketext { color:#F00; display:inline;vertical-align:top;padding-left:10px; }
<img class='likeordislike' src='design/like.png'/><h4 class='liketext'>$likes</h4>
<img class='likeordislike' src='design/dislike.png'/><h4 class='liketext'>$dislikes</h4>

No use float:left porque de nuevo necesita escribir una línea más clara y su antiguo método también..

 2
Author: Ayyappan K,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-10-28 18:20:35 
vertical-align: text-bottom;

Probado, esto funcionó para mí perfectamente, solo aplica esto a la imagen.

 1
Author: Raj,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-04-30 15:47:14

Esta pregunta es de 2012, algunas cosas han cambiado a partir de esa fecha, y como todavía recibe mucho tráfico de Google, me apetece completarla añadiendo flexbox como solución.

Por ahora, flexbox es el patrón recomendado para ser utilizado, incluso si carece de soporte IE9.

Lo único que tienes que cuidar es agregar display: flex en el elemento padre. De forma predeterminada y sin necesidad de establecer otra propiedad, todos los hijos de ese elemento estar alineado en la misma fila.

Si quieres leer más sobre flexbox, puedes hacerlo aquí.

.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>
 1
Author: Cristian Traìna,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-05-01 12:58:10

Intenta insertar tu img dentro de tu 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>​
 0
Author: james,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-11-28 02:51:37

Simplemente puede centrar la imagen y el texto en la etiqueta padre configurando

div {
     text-align: center;
}

Centro vertical del img y span

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

Puede agregar el segundo conjunto a continuación, y una cosa a mencionar es que h4 tiene el atributo block display, por lo que es posible que desee establecer

h4 {
    display: inline-block
}

Para establecer el h4 "inline".

El ejemplo completo se muestra aquí. 

<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>
 0
Author: Brady Huang,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-09-28 06:35:57