如果有一个像Ryan Fait网站上一样高度固定的粘性页脚,是否可以在该页脚上方的空间中水平和垂直居中大小可变的内容?
如果有一个像Ryan Fait网站上一样高度固定的粘性页脚,是否可以在该页脚上方的空间中水平和垂直居中大小可变的内容?
我建议看一下Bobby van der Sluis在A List Apart上关于页脚的文章。
他文章末尾的示例#7展示了一个垂直居中的块。它依赖于脚本,但是真的很小。
edit
你也可以使用单元格表来实现垂直居中。将其与Ryan Fait的粘性页脚相结合,您会得到像这样的东西:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<style type="text/css">
/* Original Sticky Footer: http://ryanfait.com/sticky-footer/ */
html, body {
margin: 0;
height: 100%;
width: 100%;
}
#footer {
margin-top: -150px;
height: 150px;
}
#footer {
background: #bbd;
}
.block {
width: 300px;
padding: 20px;
background: yellow;
margin: 0 auto 150px; /* height of #footer */
}
</style>
</head>
<body>
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr><td>
<div class="block">
<h1>Vertically Centered!</h1>
<p>This block will remain centered. Just needs that one table cell wrapping.</p>
</div>
</td></tr>
</table>
<div id="footer">Footer Content here</div>
</body>
</html>
好的,那么您可以设置内容的垂直对齐方式:
.verticalalign{
width:270px;
height:150px;
position:absolute;
left:50%;
top:50%;
margin:-75px 0 0 -135px;
}