CODEWITHSUNDEEP
htmlcss
Morpheus
Morpheus

Reputation: 997

Positioning text on top of the picture

Problem: I am having problem with positioning text right in the middle of the picture that has fullwidth.

Currently it is kinda good but not on every resolution.

My code: jsfiddle

I'm trying to achieve this with 

.title{
    position:absolute;
    left: -140px;
    top: 100px;
}

I've tried using % for left and top but it still moves around.

Try changing that result area and you will see that text is moving and I don't want that.

What I want is that h2 and h6 to be in the middle of that picture no matter which resolution is used.

How can I solve this?

Thank you.

Upvotes: 0

Views: 52

Answers (4)

Roko C. Buljan
Roko C. Buljan

Reputation: 206024

.titles{position:relative;}
.text h2,
.text h6{
    color: #fff;
    display: inline-block;
    margin: 0 2px;
}
.text{
    position:absolute;
    text-align:center; /* or use left:10%; ?*/
    top:42%;
    width:100%;
}
.titles img{ width:100%;}
<div class="titles">
    <img src="http://i62.tinypic.com/4sz2gx.jpg"/>
    <div class="text">
        <h2>Lorem, dolorem</h2>
        <h6>Lorem dolorem lorem dolorem</h6>
    </div>
</div>

Upvotes: 0

giorgio
giorgio

Reputation: 10202

That can be done easier. You can put the title in a single div, img doesn't need to be in a div. Then just align the text in the center. I've even added the vertical center logic:

.title h2 { 
    position: relative;
    /* Vertical center */
    top: 50%;
    transform: translateY(-50%);
    /* prefixes needed for cross-browser support */
    -ms-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);

    /* Horizontal center  */
    text-align: center;

    /* Push it up a little, to position it nicely in the image */
    margin-top: -1em; 
}

Full JSFiddle Demo

Upvotes: 0

vmontanheiro
vmontanheiro

Reputation: 1039

Use the property relative that you wont have problems.

.titles {
    color: white !important;
    left: 75px;
    position: relative;
    top: 150px;
}

Upvotes: 0

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167172

Use this way:

.titles {
    color: white !important;
    position: absolute;
    top: 100px;
    text-align: center;
    width: 100%;
}

Fiddle: http://jsfiddle.net/praveenscience/c5f3bufq/

Upvotes: 1

Related Questions