ayuda con css

LD

necesito que me ayuden a lo siguiente, porfa: quiero que la segunda linea no invada la imagen, sino que esté alineado con la primera linea(valga la redundancia), no se si me entienden este es mi codigo:

<h4 style="text-align: left;" data-fontsize="19" data-lineheight="24"><strong><img src="http://test.genesisconsulting.com.bo/wp-content/uploads/2019/09/icono-azul.png" width="22" /> Implementación de proyectos tecnológicos integrales </strong></h4>
Avatar

Hola Luis Xavier, ¿qué tal? 😀 Primero que nada, dos observaciones en tu código:

  1. No trabajes con estilos dentro de los elementos HTML, mejor usa un archivo css
  2. No utilices png para gráficos, en esta época lo más práctico es utilizar SVG

Respeto a tu duda, lo que debes hacer es encerrar el ícono y el texto en un contenedor, a ese contenedor lo conviertes en caja flexible y en automático tendrás un elemento al lado del otro. Algo así:

HTML

<div class="container">
  <img class="image" src="image.svg"/>
  <p>Asesoría en proyectos tecnológicos</p>
</div>

CSS

.container {
  display: flex;
  /* Evita que los elementos salten de línea si no caben */
  flex-wrap: nowrap;
}

.image {
  /* Evita que la imagen se deforme */
  flex: none;
}
Avatar

Muestra el código de cómo lo estás implementando a tu manera para seguir ayudándote

LD

Ya me salió todo bien alineado, quería hacerlo con h4, pero había conflicto con la configuración del h4 del tema, así que lo hice con <p>, muchísimas gracias 😃😃😃😃

Recuerda iniciar sesión para participar en la comunidad.