Text over image without absolute position

Issue

I am trying to put some text over an image in the middle of a page.

I saw an example like this:

<img src="image.png" style="z-index: -1;" />
<p style="position: absolute; top: 1px; left: 1px;>text</p>

but when i try to center it the text will not be in the center.

<div>
    <center>
         <img src="image.png" style="z-index: -1;" />
         <p style="position: absolute; top: 1px; left: 1px;>text</p>
    </center>
</div>

How can i create a text over image without absolute possition?

Solution

The problem is not the absolute positioning, it's how you center the text. The text in the paragraph will be centered, but that has no effect as the paragraph has the same width as the text. When you make the paragraph absolutely positioned it no longer gets its width from its parent.

You can make the parent the same width as the image, and the paragraph the same width as the parent, and then center the text inside the paragraph. Example:

div {
  position: relative;
  width: 300px;
}

p {
  position: absolute;
  left: 0;
  bottom: 20px;
  width: 100%;
  text-align: center;
  color: #fff;
}

<div>
  <img src="http://placekitten.com/300/200">
  <p>text</p>
</div>

Demo: http://jsfiddle.net/crp6V/

Note: The position: relative; on the parent element makes it the origin for the absolute position of the paragraph.

If you want to center both the image and the text, then you would just make the paragraph the same width as the parent: http://jsfiddle.net/crp6V/2/

Answered By - Guffa