Centering an image for any resulition

M

mr_vocab

what sort of hatml code could i use so that any computer at any resultion
could see a picture in the dead centre of their screen?
 
B

brucie

in post: <
mr_vocab said:
what sort of hatml code could i use so that any computer at any resultion
could see a picture in the dead centre of their screen?

you cant get dead center of their screen as their window may not cover
100% of the screen area and even if it does the window may have elements
like menu/scroll/tool bars etc that will cause the image to be displayed
off center to the screen.

html,body{height:100%;width:100%;margin:0;padding:0;display:table;}
div{width:100%;height:100%;text-align:center;vertical-align:middle;display:table-cell;}

<div><img...></div>

centering thingys
http://dorward.me.uk/www/centre/
http://www.w3.org/Style/Examples/007/center.html
http://www.student.oulu.fi/~laurirai/www/css/middle/
http://hicksdesign.co.uk/articles/css/vertical_centering_with_css/
 
O

Oliver

mr_vocab said:
what sort of hatml code could i use so that any computer at any resultion
could see a picture in the dead centre of their screen?


If there is nothing else on your page but that image, you can also set
is as a background like this:

body {
background: #000000 url("someimage.png") no-repeat center center;
color: #ffffff;
}
 
M

mr_vocab

great thanks :)
brucie said:
in post: <

you cant get dead center of their screen as their window may not cover
100% of the screen area and even if it does the window may have elements
like menu/scroll/tool bars etc that will cause the image to be displayed
off center to the screen.

html,body{height:100%;width:100%;margin:0;padding:0;display:table;}
div{width:100%;height:100%;text-align:center;vertical-align:middle;display:t
able-cell;}

<div><img...></div>

centering thingys
http://dorward.me.uk/www/centre/
http://www.w3.org/Style/Examples/007/center.html
http://www.student.oulu.fi/~laurirai/www/css/middle/
http://hicksdesign.co.uk/articles/css/vertical_centering_with_css/
 
M

mr_vocab

hi

gtreat thanks for the tips
Oliver said:
If there is nothing else on your page but that image, you can also set
is as a background like this:

body {
background: #000000 url("someimage.png") no-repeat center center;
color: #ffffff;
}
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,744
Messages
2,569,484
Members
44,903
Latest member
orderPeak8CBDGummies

Latest Threads

Top