How to center images on a web page for all screen sizes

html css centering text-align
connor.p picture connor.p · May 5, 2011 · Viewed 235.6k times · Source

I'm having a problem with my HTML. I've searched all over the internet, but still no real answer.

I have a website with some images, and I want them to be in the middle. Now, on my screen they're in the middle, but that's because I've put them there by moving them to one side. When my friends to look at it, the image is off-center.

Here's the website; if you are on a 13.5" screen it will look to be in the middle.

Answer

Thomas Shields picture Thomas Shields · May 5, 2011

Try something like this...

<div id="wrapper" style="width:100%; text-align:center">
<img id="yourimage"/>
</div>

Related questions

How to horizontally center a <div>

How can I horizontally center a <div> within another <div> using CSS? <div id="outer"> <div id="inner">Foo foo</div> </div>

Read More
Best way to center a <div> on a page vertically and horizontally?

Best way to center a <div> element on a page both vertically and horizontally? I know that margin-left: auto; margin-right: auto; will center on the horizontal, but what is the best way to do it vertically, too?

Read More
How to center a "position: absolute" element

I'm having a problem centering an element that has the attribute position set to absolute. Does anyone know why the images are not centered?

Read More