Coloque o texto ao lado da imagem em HTML

1. Use a propriedade CSS float para colocar o texto próximo a uma imagem em HTML
2. Use display: inline-block e vertical-align: top para colocar o texto próximo a uma imagem em HTML

O artigo explica as maneiras de colocar texto ao lado de imagens usando HTML e CSS.

Use a propriedade CSS float para colocar o texto próximo a uma imagem em HTML

Podemos usar a propriedade CSS float para definir como um elemento pode flutuar. Um elemento pode flutuar para a direita ou esquerda. Algumas outras opções são none, o que significa que o elemento não irá flutuar e, inherit, exibirá o comportamento de seu pai. Usamos a propriedade float para especificar o posicionamento e a formatação de um elemento. Também podemos usar a propriedade para colocar um texto próximo a uma imagem.

Podemos facilmente obter o seguinte estilo envolvendo o conteúdo de imagem e texto com um div. O HTML deve ser estruturado conforme abaixo.

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

Agora que o HTML está estruturado, podemos adicionar nosso CSS como embutido, interno ou externo. Para este exemplo, implementaremos os estilos usando CSS embutido. Primeiro, defina a propriedade float como left para o div que envolve a imagem. Use o URL https://loremflickr.com/320/240 como a fonte da imagem. Em seguida, escreva qualquer texto de sua escolha e envolva-o com outro div.

Exemplo de código:

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

Aqui, a propriedade float: left é fornecida ao invólucro da imagem. A propriedade float: left colocará a imagem à esquerda e outro wrapper envolvendo o conteúdo do texto será colocado ao lado da imagem. Desta forma, podemos usar a propriedade CSS float para colocar um texto próximo a uma imagem.

Use display: inline-block e vertical-align: top para colocar o texto próximo a uma imagem em HTML

Podemos usar as propriedades display e vertical-align para colocar um texto próximo a uma imagem em HTML. O display define como um elemento é exibido em HTML. Podemos definir a propriedade de exibição de um elemento como inline, inline-block, block, etc. Quando atribuímos display a inline-block, isso tornará o elemento um elemento inline, mas ainda podemos defina as propriedades height e width para ele. Assim, poderemos colocar o texto ao lado de uma imagem. A propriedade vertical-align define o alinhamento vertical de um elemento. Quando usamos o valor top, o elemento será alinhado ao topo do elemento mais alto da linha.

Aqui, podemos estruturar nosso código novamente como abaixo.

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

Por exemplo, defina a propriedade display como inline-block e a propriedade vertical-align como top para o wrapper de imagem div. Quanto ao invólucro, div do texto define a propriedade display como inline-block.

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

Aqui, a propriedade display: inline-block define a propriedade do invólucro que está envolvendo a imagem como uma propriedade do inline-block. A opção inline-block não adiciona uma quebra de linha ao lado do elemento. Portanto, os elementos se alinharão um ao lado do outro. Novamente envolvemos o wrapper de texto com a propriedade display: inline-block também. Semelhante ao wrapper anterior, ele colocará o conteúdo do texto ao lado da imagem.