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

javascript - Iterate over array and calculate average values of array-parts -

php - Time zone issue -

iphone - Using nested NSDictionary with Picker -