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
Post a Comment