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
É 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
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!