Como deixar imagem e texto alinhado ao topo da imagem no centro da tela, CSS e HTML

Estou inciando na progração a um pouco menos de um mês, e estou estudando HTML e CSS e queria pedir ajuda pois estou com dificuldade de deixar a imagem e texto no centro da tela sendo que o texto tem que estar alinhado no topo da imagem, espero que alguem possa me ajudar.

worgamheim há 2 anos

Uma simples e boa forma de conseguir isso de forma geral é utilizando o atributo align das tags.

Este atributo pode ser utilizado com os seguintes parametros: align="left" align="right" align="middle" align="top" align="bottom"

exemplo:

<p align="left">Estou na esquerda!<br>
   <img align="left" src="/favicon-light.png" height="32" width="32" />
</p>

<p align="middle">Estou no centro!<br>
   <img align="middle" src="/favicon-light.png" height="32" width="32" />
</p>

<p align="right">Estou na direita!<br>
    <img align="right" src="/favicon-light.png" height="32" width="32" />
</p>

Podendo também utilizar o css text-align, para melhor organizar o texto com a imagem:

<p align="middle" style="text-align: center;">Estou no centro!<br>
   <img src="/favicon-light.png" height="32" width="32" />
</p>

CaioLima há 2 anos

muito obrigado pela explicaçao, deu certinho aqui

meira há 2 anos

Para centralizar o texto use text-align: center; Para centralizar a imagem ao meio pode utilizar margin: auto; Se não resolver, recomendo dar uma olhada aqui: https://www.freecodecamp.org/news/how-to-center-anything-with-css-align-a-div-text-and-more/

felipeeb há 2 anos

Olá Caio! Eu particularmente gosto de usar flexbox nos meus layouts fiz um pequeno exemplo que acho que seja o que voce quer fazer.

<div style="display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; width: 100%">
    <span>Texto</span>
    <img src="" style="width: 50px; height: 50px" />
</div>

Eumanuel há 2 anos

O essêncial quando você estiver fazendo uma pergunta é postar seu código junto, para eu entender o que você precisa, tudo bem?

Mas vamos lá, vou tentar te ajudar mesmo assim... Acredito que você só deseja centralizar o texto, é isso? Se for, você precisa usar a propriedade text-align: center; do css, só aplicar ao texto que você quer que seja centralizado.

Se não for, me avisa e manda mais detalhes pra eu entender o que você realmente precisa 🤙