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

问题

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.

回答1:

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!

回答2:

Try something like this...

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

回答3:

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

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

JS Bin demo.

回答4:

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

this works horizontally

来源：https://stackoverflow.com/questions/5901789/how-to-center-images-on-a-web-page-for-all-screen-sizes

标签

html

css

centering

text-align