CODEWITHSUNDEEP
htmlcssimageheaderpositioning
user1694077
user1694077

Reputation:

How to horizontally center a header that is position:absolute

I'm trying to horizontally and vertically center a header on top of an image. So far I've got the vertical centering down (which is the reason for the relative and absolute positioning). However, the horizontal centering is giving me problems now: margin:0 auto; doesn't work, left:50%; doesn't work and text-align:center doesn't work. Does anyone know how to horizontally center the header on top of the image?

Details:

HTML

<article>
    <h2>Title</h2>
    <img src="http://bit.ly/gUKbAE" />
</article>

CSS

article { 
    position: relative; 
}

h2 {
    line-height: 0;
    position: absolute;
    top: 50%; 
    left: 0;
    margin: 0;
    padding: 0;
}

It's here: http://jsfiddle.net/kmjRu/21/

Upvotes: 1

Views: 3943

Answers (1)

Alfred Xing
Alfred Xing

Reputation: 4632

You can set the article to display: inline-block and width: auto, then center the h2: http://jsfiddle.net/kmjRu/28/

Upvotes: 1

Related Questions