1

Preciso alinhar horizontalmente e verticalmente um texto dentro de uma imagem.

Algum de vocês sabe como posso fazer isso?

HTML

<img src="https://marketingdeconteudo.com/wp-content/uploads/2017/01/formatos-de-imagem-2.jpg">
    <p>Texto que deve ser alinhado!</p>
</img>

CSS

/* Não tenho a menor ideia do que fazer! */
1

1 Resposta 1

4

Jovem só para te esclarecer, a tag <img> não precisa ser fecha, logo isso é errado <img></img> (Imagem é um elemento do tipo "Void" ele não pode ter nada dentro, outro exemplo é o <input> que também não tem tag de fechamento </input>)

Agora sobre a sua pergunta uma das opções que vc pode fazer é colocar a imagem dentro de uma <div> que esteja com display:flex e usar as propriedades do flex para alinhar o que estiver dentro na horizontal com justify-content:center e na vertical com align-items:center

Veja o exemplo:

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
body {
    display: flex;
    justify-content: center;
    align-items: center;
}
.holder {
    display: flex;
    justify-content: center;
    align-items: center;
}
.holder img, .holder p {
    position: absolute;
    font-size: 32px;
    font-family: sans-serif;
    text-align: center;
}
<div class="holder">
    <img src="https://marketingdeconteudo.com/wp-content/uploads/2017/01/formatos-de-imagem-2.jpg">
    <p>Texto que deve <br>ser alinhado!</p>
</div>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .