Colocar texto junto a la imagen en HTML

1. Utilice la propiedad CSS float para colocar el texto junto a una imagen en HTML
2. Utilice display: inline-block y vertical-align: top para colocar el texto junto a una imagen en HTML

El artículo explica las formas de colocar texto junto a imágenes mediante HTML y CSS.

Utilice la propiedad CSS float para colocar el texto junto a una imagen en HTML

Podemos usar la propiedad CSS float para definir cómo puede flotar un elemento. Un elemento puede flotar hacia la derecha o hacia la izquierda. Algunas otras opciones son none, lo que significa que el elemento no flotará y inherit, que exhibirá el comportamiento de su padre. Usamos la propiedad float para especificar el posicionamiento y el formato de un elemento. También podemos usar la propiedad para colocar un texto junto a una imagen.

Podemos lograr fácilmente el siguiente estilo envolviendo el contenido de la imagen y el texto con un div. El HTML debe estar estructurado como se muestra a continuación.

<div>
    <div>
        <img src="url" />
    </div>
    <div>
        Text content goes here
    </div>
</div>

Ahora que el HTML está estructurado, podemos agregar nuestro CSS como en línea, interno o externo. Para este ejemplo, implementaremos los estilos usando CSS en línea. Primero, establezca la propiedad float en left para el div que envuelve la imagen. Utilice la URL https://loremflickr.com/320/240 como fuente de la imagen. A continuación, escriba cualquier texto de su elección y envuélvalo con otro div.

Ejemplo de código:

<div>
    <div style="float: left">
        <img src="https://loremflickr.com/320/240" />
    </div>
    <div>
        Text content goes here
    </div>
</div>

Aquí, la propiedad float: left se le da a la envoltura de la imagen. La propiedad float: left colocará la imagen a la izquierda, y otro contenedor que envuelva el contenido del texto se colocará justo al lado de la imagen. De esta forma, podemos utilizar la propiedad CSS float para colocar un texto junto a una imagen.

Utilice display: inline-block y vertical-align: top para colocar el texto junto a una imagen en HTML

Podemos utilizar las propiedades display y vertical-align para colocar un texto junto a una imagen en HTML. La display define cómo se muestra un elemento en HTML. Podemos establecer la propiedad de visualización de un elemento como inline, inline-block, block, etc. Cuando asignamos display a inline-block, hará que el elemento sea un elemento en línea, pero aún podemos establezca las propiedades height y anchura. Así, podremos colocar el texto al lado de una imagen. La propiedad vertical-align define la alineación vertical de un elemento. Cuando usamos el valor top, el elemento se alineará con la parte superior del elemento más alto de la línea.

Aquí, podemos estructurar nuestro código nuevamente como se muestra a continuación.

<div>
    <img src="" alt="img"/>
</div>
<div>
    <p>
        Text Here,
    </p>
</div>

Por ejemplo, establezca la propiedad display en inline-block y la propiedad vertical-align en top para el envoltorio de imagen div. En cuanto a la envoltura, div del texto establece la propiedad display en inline-block.

Ejemplo de código:

<div style="display:inline-block;vertical-align:top;">
    <img src="https://loremflickr.com/320/240" alt="img"/>
</div>
<div style="display:inline-block;">
    <p>
    Here goes the text content.
    </p>
</div>

Aquí, la propiedad display: inline-block establece la propiedad del contenedor que envuelve la imagen como una propiedad de bloque en línea. La opción inline-block no agrega un salto de línea al lado del elemento. Por lo tanto, los elementos se alinearán uno al lado del otro. También envolvemos el contenedor de texto con la propiedad display: inline-block. Al igual que en el contenedor anterior, colocará el contenido del texto justo al lado de la imagen.