Reputation: 623

Positioning text relative to image position

Basically, image is centered(I cant use absolute positioning because everyone has different screen resolutions and the image is centered) and I want my text to be 20 pixels down from top and 10 pixels right from left. How do I do it ? I have searched but got nothing. Probably due to my typing.

Upvotes: 0

Answers (6)

user2385737

Reputation:

Good question.

Basically you say how far down from the top and how far left.

position:relative;
left:10px;
top:-20

Tip: put both the picture and text inside a div so that the text is relative to the div.

Also checkout: http://www.w3schools.com/css/css_positioning.asp

Upvotes: 0

Joe

Reputation: 2596

You have a couple of options. You're going to need to use a div the size of your image and center that. Then you can either set the image as the background of that div, or you can make the div position: relative and add an <img> tag that is positioned absolutely.

Here's an example of the first approach.

HTML:

<div id="imageContainer">
    Some text that's overlaying the image.
</div>

CSS:

#imageContainer {
    width: 275px;
    height: 95px;
    background: url('https://www.google.com/images/srpr/logo4w.png');
    margin: 0 auto;
    left: 0;
    right: 0;
    padding: 20px 0 0 10px;
}

And a JSFiddle to show it working: http://jsfiddle.net/VD34W/

Upvotes: 1

pandavenger

Reputation: 1027

Edit:

Since you want the text to be overlay you can use a hack using position: relative on the wrapping element and position: absolute on the inner ones. This allows you to position inside the wrapping element as long as the wrapping element has a width and height;

http://jsfiddle.net/FcBmd/1/

Irrelavent Text From Previous Answer: Something maybe using text-align: center http://jsfiddle.net/FcBmd/

Upvotes: 0

Mohammad Areeb Siddiqui

Reputation: 10189

Try this:

HTML

<div id="theDiv">
    <p>Some text here</p>
</div>

CSS

#theDiv {
    background: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSvT90hfqXnsPUsrySmYtU2Hj1ypEwCq0muzSCKdxOSmUnZqp_Z);
    width: 300px;
    height: 300px;
}

#theDiv p {
    padding-top: 20px;
    padding-left: 10px;
}

Demo

Upvotes: 0