Deprecated tags and centering images...

Anonymous posted this at 12:43 — 5th April 2011.

Joined: Jan 1970

Hey all,

I'm trying to remove deprecated html tags from my website and replace them with CSS as is recommended but I'm baffled as to why it's so complicated to center an image. I've read so many different ways of doing it but they all seem to have problems.

Whats the official or best way to center an image using CSS nowadays?

Cheerz :0)

webwiz posted this at 16:55 — 5th April 2011.

He has: 629 posts

Joined: May 2007

Images are inline elements, which means you can center them with text-align: center; - or do you mean something else?

HTML

<h2>A Centered Image</h2>
<div class="figure"><img src="/images/my-nice-pic.jpg" alt="">
<div class="figcaption">My lovely house on the hill</div></div>

CSS

.figure {
  text-align: center;
}
.figure img {
  max-width: 100%;
}
.figcaption {
  text-align: left;
}

Cordially, David
--
delete from internet where user_agent="MSIE" and version < 8;

vladmm (not verified) posted this at 09:24 — 7th April 2011.

They have: 5,633 posts

Joined: Jan 1970

That's perfect.

I've just read so many methods of doing it, I wasn't sure which one was the more correct way of doing it but what you mentioned above looks really good.

Cheers