CSS中粘性页脚上方的水平和垂直居中

Question

CSS中粘性页脚上方的水平和垂直居中

Dan*_*Dan 8 html css center footer centering

如果在Ryan Fait的网站上有一个固定像素高度的粘性页脚,是否可以在这个页脚上方的空间中水平和垂直居中可变大小的内容？

Answer 1

Jer*_*son 5

我建议看一下Bobby van der Sluis在A List Apart上关于Footers的文章.

他文章末尾的示例#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>

Run Code Online (Sandbox Code Playgroud)

归档时间：	14 年前
查看次数：	2583 次
最近记录：	13 年，9 月前