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

StackOverflow https://stackoverflow.com/questions/5901789

Question

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.

Was it helpful?

Solution

Would it not be acceptable to use just a simple <center></center> tag?

I must be missing something here if not. Feel free to explain why in a comment. I love webdesign and your site is very impressive. I might suggest doing something to lower the load time, that is a bit of a turn off.

-From one MC fan to another :)

EDIT

I just took a look at your code... ouch!

<center></center> 

<center><body onload="MM_preloadImages('../logo-glow.png')"> 
<a href="homepage.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('minecraft2','','../logo-glow.png',1)"><img src="../log-noglow.png" name="minecraft2" width="998" height="222" hspace="0" border="0" align="absmiddle" id="minecraft2" /></a></body></center>

Try not to put formatting tags outside of the body. Place the <center> inside of the body tag. It works because it follows the low level strict rules of HTML, however, not all browsers are this nice and some might display your page incorrectly unless this problem is fixed!

OTHER TIPS

Try something like this...

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

In your specific case, you can set the containing a element to be:

a {
    display: block;
    text-align: center;
}

JS Bin demo.

<div style='width:200px;margin:0 auto;> sometext or image tag</div>

this works horizontally

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top