css - Problems with vertical centering and divs taking up space -


i've got few problems i've been trying remedy today.

i have image 930 pixels high want center in exact middle of screen. used recommended css snippet.

position: absolute; top: 50%; left: 50%; width: 1280px; height: 930px; margin-top: -465px; margin-left: -640px; 

but unfortunately, if viewport smaller 930px, starts crop top of area. i've tried few methods, nothing seems help.

also, in chrome i've managed number of sized, moved divs don't require scrolling, in firefox , ie seem still take space before moving (using left: , top:)

any appreciated, thanks.

i have ugly solution works except ie<8:

<html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title></title> </head>  <body>     <div id="positioner"></div><!--     --><img src="yourimage" alt="" id="image" /> </body> </html> 

and css:

html,body,#positioner {     margin:0;     padding:0;     height:100%; } body {     text-align:center; } #positioner {     display:inline-block;     vertical-align:middle; } #image {     max-height:100%;     max-height:100%;     vertical-align:middle; } 

Comments

Popular posts from this blog

linux - Using a Cron Job to check if my mod_wsgi / apache server is running and restart -

actionscript 3 - TweenLite does not work with object -

jQuery Ajax Render Fragments OR Whole Page -