My CSS is a tad borked, and I have no idea why.

This post has been de-listed

It is no longer included in search results and normal feeds (front page, hot posts, subreddit posts, etc). It remains visible only via the author's post history.

Post Flair (click to view more posts with a particular flair)

Unsolved

Post Body

Hey all,

I'm trying to make an image appear centered below a block of text using CSS. I've read through a couple of W3/MDN docs and Stack Overflow questions, and am still unsure as to why the image is aligned to the left. Here's the CSS I used to try make the image centered:

div.kitty {
  position: relative;
}
div.kitty img {
  position: absolute;
  top: 50%;
  margin-left:auto;
  margin-right: auto;
}

And the corresponding HTML (apologies for potato formatting): <section> <div class="kitty"> <img src=http://i.imgur.com/lBPRFcy.gif> </div> </section>

Not sure what I'm missing, any help would be appreciated!

Author

Account Strength

100%

Account Age

10 years

Verified Email

Yes

Verified Flair

Total Karma

45,096

Link Karma

27,339

Comment Karma

13,323

Profile updated: 1 day ago

Posts updated: 6 months ago

BeefyTheCat

Subreddit

r/HTML

Post Details

We try to extract some basic information from the post title. This is not always successful or accurate, please use your best judgement and compare these values to the post title and body for confirmation.

Posted: 8 years ago
Reddit URL: View post on reddit.com
External URL: reddit.com/r/HTML/commen...