how to i get an image 100% in the middle of every single screen in the world

Question

there is a problem im having with my HTML, ive searched the question all over the internet but still no real answer.

i have a website with some images in, and i want them to be in the middle, now on my screen there in the middle. but that because ive put them there by moving them to one side, but when i get my friends to look at it, the image is of to one side. now my friends tell me just to leave it but i just can't.

and this is the webstie (if you are on a 13.5" screen it will look to be in the middle) www.roundaboutmk.com

Answer 1

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;}

Answer 2

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.

Answer 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!