Deprecated tags and centering images...

He has: 37 posts

Joined: May 2008

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)

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;

He has: 37 posts

Joined: May 2008

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

Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.