Take the 2-minute tour ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.

I have a website with some images, and I want them to be in the middle, now on my screen they are in the middle. Because I've put them there by moving them to one side, when I get my friends to look at it, the image is off to one side.

On a 13.5" screen it will look to be in the middle.

share|improve this question

3 Answers 3

on that page, it's easy! real easy.

you have the layout like this:

<p style='text-align:center'>
<img />
</p>

worked for me on Chrome dev tools, should work the same for MSIE and FF.

ofcourse you can use CSS as someone suggested, creating a text-align:center class.

As people suggested here, you can go the

margin:0px auto;

way, but unfortunately it doesn't work in MSIE, so you'll need to create a different stylesheet to make it work on IE, besides that, the margin way is working on an element who isn't 100% width, and for some reason it's not working on your website.

and a slight suggestion: DON'T EVER USE pixel.gif, it's a living hell to program after a person who used that, and in all honestly - it's a bad practise.

good luck!

share|improve this answer

What you ask is not always possible.

Using CSS you can center the image in the browser window without too much difficulty. As John pointed out, doing so horizontally is extremely easy. You can also do that vertically with not too much effort.

To get an image centered on screen is much harder. You have to use Javascript to get the size of the user's screen (which may not even be returned correctly depending on virtual desktops, multiple screens, the OS, etc). Then you use the screen size, window size and browser positions (possibly obtained by Javascript) to calculate where the middle of the screen is relative to the browser.

It is highly likely that this is not possible in all platforms as you require obtaining a number of metrics from the OS. So, I'm with your friend, let it be and move on. Perhaps you can fix the repeating image problem instead, on my screen I see the image twice since my resolution is 2560x1600.

share|improve this answer
    
You're of course correct about the difference between 'screen' and 'browser', but I'd be astonished if the OP did not in fact mean the browser. Good point nonetheless. –  John Catterfeld May 5 '11 at 19:12

This problem can be easily solved with cascading stylesheets (CSS).

You can centre the image by using CSS to add an automatic margin to your image, and converting it to a block element.

Adding this CSS to your page will add an auto margin to the left and right of your minecraft image.

#minecraft2 {
    margin: 0 auto;
    display: block;
}

You'll also want to remove the align="absmiddle" and hspace="115" from your existing code.

Finally you'll also probably want to remove the horizontal scorllbar that can appear in some browsers, which can be done by adding this to your body tag:

body {margin: 0;}
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.