HTML: Alinhar texto depois da imagem

Neste artigo veremos como alinhar texto depois da imagem, ou seja, fazer com que a imagem e um texto fiquem lado a lado na sua página web, somente com CSS.

alinhar imagem com texto capa

Veja este conteúdo em vídeo também:

Fala programador(a), beleza? Bora aprender a colocar uma imagem do lado de um texto!

A grande ideia por trás dessa técnica, de deixar a imagem do lado de um texto

É que a imagem é um elemento de bloco, ou seja, ela possui um display block como padrão

Por isso que ela ocupa 100% da largura, e o texto é jogado para baixo dela

O que temos que fazer é deixar os dois elementos como inline-block, então teremos um do lado do outro

Veja um exemplo prático:

<!DOCTYPE html>
<html>
<head>
    <title>Como alinhar texto depois da imagem</title>
    <meta charset="utf-8">
</head>
<body>
    <img src="bg-img.jpg">
    <p>Este é um texto ao lado de uma imagem!</p>
</body>
</html>

Aqui simulei o que acontece no dia a dia, uma imagem e um parágrafo descrevendo ela

Porém deste jeito, como você deve saber, o texto e a imagem não ficarão lado a lado

Veja como fica no navegador:

imagem ao lado de texto ex1

Bom, era o comportamento esperado e o que deve estar ocorrendo aí

Quer se especializar em Desenvolvimento Web? Veja o nosso catálogo de cursos.

Agora vamos ver o CSS que precisamos adicionar para ajustar isso:

img {
    width: 500px;
    height: 500px;
}
img, p {
    display: inline-block;
}

Agora com esta regra de display, imagem e texto ficarão alinhados, veja:

imagem ao lado de texto ex2

Veja que o problema foi resolvido!

Porém o texto está no pé da imagem, podemos deixar eles alinhado no topo também

Adicionando float com left para isso, deste jeito o texto será alinhado no topo, veja o código:

img, p {
    float: left;
}

Veja o resultado:

imagem ao lado de texto ex23

E assim cobrimos todas as formas de alinhar texto ao lado de uma imagem!

Conclusão

Neste artigo vimos como alinhar texto depois da imagem de duas maneiras

Na primeira deixando os dois elementos, img e o texto, com display e inline-block

Já a segunda forma foi deixando os dois elementos com float e left

A única diferença é que com float, o texto ficando alinhado ao topo da imagem também

Confira também nosso catálogo de cursos gratuitos, com aulas semanais no YouTube

2 Comentários

Oldest

Newest Most Voted

Inline Feedbacks

View all comments

Isaias Santos

4 anos atrás

Olá, Matheus Battisti. Eu queria sabe como centraliza o texto no lado na imagens, deixa ele no meio do centro da imagem ao lado. Você poderia me ajudar nessa questão?

Responder