Problems with vertical centering and divs taking up space
I've got a few problems that I've been trying to r开发者_如何转开发emedy today.
I have an image 930 pixels high that I want to center in the exact middle of the screen. I used a recommended CSS snippet.
position: absolute;
top: 50%;
left: 50%;
width: 1280px;
height: 930px;
margin-top: -465px;
margin-left: -640px;
But unfortunately, if the viewport is smaller than 930px, it starts to crop the top of the area. I've tried a few methods, but nothing seems to help.
Also, in Chrome I've managed to get it so a number of sized, but moved divs don't require scrolling, however in Firefox and IE they seem to still take up space that they would before moving (using left: and top:)
Any help would be appreciated, thanks.
I have a ugly solution but it works except for 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;
}
加载中,请稍侯......
精彩评论