Center text within image

Asked

Viewed 2,026 times

1

I need to align text horizontally and vertically within an image.

Any of you know how I can do this?

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! */
html html5 css3

  • Related: https://answall.com/q/162510/99718

1 answer

3

Young just to clarify, the tag <img> doesn’t need to be closed, so this is wrong <img></img> (Image is an element of type "Void" it can not have anything inside, another example is the <input> which also has no closing tag </input>)

Now on your question one of the options you can make is to put the image inside a <div> who is with display:flex and use the properties of flex to align what’s inside horizontally with justify-content:center and vertically with align-items:center

Take the example:

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>

Browser other questions tagged html html5 css3

You are not signed in. Login or sign up in order to post.