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.
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
Formação Claude Code
Domine Claude Code do absoluto zero até o avançado
- 114 aulas
- 4 projetos
- 9h 15min
É 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:
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:
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:
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
Matheus Battisti
Formações
Formação Vibe Coding
Do Prompt ao Produto: Crie Software Real com IA
- 474 aulas
- 20 projetos
- 39h 27min
Blog | Mais populares
Tags HTML: comandos e códigos básico a avançado
O conhecimento das principais tags HTML é vital para qualquer programador front-end, pois elas são a base da estrutura de qualquer página web. O HTML […]
Como fazer um select mudar de URL/link
Como fazer input de password com olho de mostrar senha
O que é o input type password? Antes de sair codando, bora entender a base O input type password é o campo de senha do […]
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?
opa Isaias, procure sobre Flexbox, a regra align-items é o que vc precisa, abraço!