CODEWITHSUNDEEP
htmlcss
michaelmcgurk
michaelmcgurk

Reputation: 6509

Place text centrally over image

I'd like to place my H2 text vertically & horizontally center over my image.

Can someone explain how I do this?

https://jsfiddle.net/q3odxfmb/

<div class="content">

<img src="http://placehold.it/940x510">
<h2>
TEXT WILL GO HERE
</h2>

</div>

Upvotes: 1

Views: 70

Answers (3)

Justin C
Justin C

Reputation: 316

It's quite easy. Simply set css to:

.h2 {
line-height:/*height of your image*/
}

Then set the margin in the div to auto:

div {
    background-url: <image-link>;
    margin:auto
}

This should center it perfectly.

You would have to have a small margin set for this method.

Here is a JSBin with an easy method, too: https://jsbin.com/vawowebolu/edit?html,css,js,output

Upvotes: 1

cst1992
cst1992

Reputation: 3931

set the text as a background over a div, and center the text over the div.

HTML:

<div class="content">
    <h2 id="mytext">
    TEXT WILL GO HERE
    </h2>
</div>

CSS:

div {
    background: url("<image-link>")
}

#mytext {
    line-height: 510px;
    vertical-align:middle;
    text-align: center;
}

Upvotes: 0

Gautam Jha
Gautam Jha

Reputation: 1473

fiddlehttps://jsfiddle.net/q3odxfmb/1/

img {
    max-width: 100%;
    vertical-align: middle;
}

#container {
    position: relative;
}

#text-outer {
    height: 100%;
    margin-left: 12.5%;
    position: absolute;
    top: 0;
    width: 75%;
}

#text-inner {
    color: #fff;
    position: absolute;
    text-align: center;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
}

this question already asked so many times please refer this link

thank you all

Text Above Image CSS Z-Index Not Working

Upvotes: 2

Related Questions