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

Verificamos exhaustivamente cada una de las reseñas de nuestro espacio con la meta de enseñarte siempre la información veraz y actualizada.

Solución:

Puede usar (en los elementos h4, ya que están bloqueados de forma predeterminada)

display: inline-block;

O puede hacer flotar los elementos a la izquierda/derecha

float: left;

Simplemente no olvides limpiar los flotadores después

clear: left;

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

 
    
Left Text
    
Right Text
    

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

div 
     text-align: center;

centrar verticalmente el img y el intervalo

img 
     vertical-align:middle;

span 
     vertical-align:middle;

Simplemente puede agregar el segundo conjunto a continuación, y una cosa para mencionar es que h4 tiene visualización de bloque attributepor lo que es posible que desee establecer

h4 
    display: inline-block

para configurar el h4 “en línea”.

El ejemplo completo se muestra aquí.

  






  Take a photo

Esta pregunta es de 2012, algunas cosas cambiaron a partir de esa fecha, y como todavía recibe mucho tráfico de Google, tengo ganas de completarla agregando caja flexible como solución

Por ahora, caja flexible es el patrón recomendado para ser utilizado, incluso si carece de compatibilidad con IE9.

Lo único que debe importarte es agregar display: flex en el elemento padre. Por defecto y sin necesidad de configurar otra propiedad, todos los hijos de ese elemento se alinearán en la misma fila.

Si quieres leer más sobre flexboxPuede hacerlo aquí.

.container 
  display: flex;


img 
  margin: 6px;

   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.

Agradecemos que quieras avalar nuestro cometido ejecutando un comentario o puntuándolo te lo agradecemos.

Utiliza Nuestro Buscador