我的 Django 模板中的页脚居中问题[关闭]答案

【问题标题】：Problem centering footer in my Django template [closed]我的 Django 模板中的页脚居中问题[关闭]
【发布时间】：2011-03-21 11:46:31
【问题描述】：

我在尝试将页脚在 Django 模板中居中时遇到问题。页脚 div 类是 Pagination。

基础 HTML：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
    <head>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8">
        <title>Flickr Photobrowser</title>
        <style>
        html, body {
            height: 100%;
        }
        * {
            margin: 0;
            padding: 0;
        }
        #wrap {
            min-height:100%;
        }
        #header {
            background: #111;
            color: white;
        }
        #header, #content {
            padding: 10px 150px 10px 150px;
        } 
        #content {
            overflow:auto;
            padding-bottom: 150px;  /* must be same height as the footer */
        }
        pagination {
            position: relative;
            margin-top: -150px; /* negative value of footer height */
            height: 150px;
            text-align: center;
        } 
        h1 {
            font-family: Georgia;
            font-weight: 100;
            font-style: italic;
            font-size: 30px;
            padding-top: 50px;
        }
        h2 {
            font-size:20px;
            margin-top: 5px;
            color: #ff0080;
            margin-bottom: 5px;
        }
        #image {
            float:left;
            padding: 2px;
        }
        .thumbnail {
            position: relative;
            z-index: 0;
        }
        .thumbnail:hover {
            background-color: transparent;
            z-index: 50;
        }
        .thumbnail span { /*CSS for enlarged image*/
            position: absolute;
            background-color: lightyellow;
            padding: 5px;
            left: -1000px;
            border: 1px solid #000000;
            visibility: hidden;
            color: black;
            text-decoration: none;
        }
        .thumbnail span img { /*CSS for enlarged image*/
            border-width: 0;
            padding: 2px;
        }
        .thumbnail:hover span { /*CSS for enlarged image on hover*/
            visibility: visible;
            margin-left: auto;
            margin-right: auto;
            top: 0;
            left: 10px; /*position where enlarged image should offset horizontally */
        }

        </style>
    </head>

    <body>
        <div id="wrap">
            <div id="header"><h1>Flickr Photobrowser</h1></div>
            <div id="content">
            {% block content %}
                <h2>Welcome!</h2>
                <p>This sample application is here to show you how you can authenticate against Twitter using their 
                    new oAuth API.<br>Press the big button below to authenticate.</p>
                <p><a class="auth" href="auth/">Authenticate »</a></p>
            {% endblock %}
            </div>

        </div>
        {% block footer %}
        {% endblock %}
    </body>

</html>

实际页面 HTML：

{% extends "base.html" %}

{% block content %}
<form method="get" action="../photouser/">
Flickr username: <input type="text" name="username"> 
<input type="submit" value="submit">
</form>
<p>Search by <a href="../phototags/">tags</a>?</p>
<p><h2>Displaying photos for {{ username }}</h2></p>
<ul>
{% for photosmall, photobig, actualimage in photopages.object_list %}
<div id="image"><a class="thumbnail" href="{{ actualimage }}">
<img src="{{ photosmall }}"/><span><img src="{{ photobig }}"/></span>
</a></div>
{% endfor %}
</ul>

{% endblock %}

{% block footer %}
<div class="pagination">
    <span class="step-links">
        {% if photopages.has_previous %}
            <a href="?username={{ username }}&page={{ photopages.previous_page_number }}">Previous</a>
        {% endif %}

        <span class="current">
            Page {{ photopages.number }} of {{ photopages.paginator.num_pages }}
        </span>

        {% if photopages.has_next %}
            <a href="?username={{ username }}&page={{ photopages.next_page_number }}">Next</a>
        {% endif %}
    </span>
</div>
{% endblock %}

【问题讨论】：

标签： html css django sticky-footer

【解决方案1】：

看起来一个简单的错字是你唯一的问题。

你有这个 CSS：

pagination {
    position: relative;
    margin-top: -150px; /* negative value of footer height */
    height: 150px;
    text-align: center;
}

这是在寻找像 <pagination> 这样的元素，而你没有（或不想要）。

相反，您的元素是：

<div class="pagination">

因此，将您的 CSS 选择器更改为：

.pagination

【讨论】：

天哪。怪物现场。 smacks head 那我应该删除这个问题吗？我不认为它对其他人很有用...？
如果您愿意，可以将其删除。如果你这样做，很高兴投票支持我的任何其他答案以表示感谢。我不知道在这种情况下的 SO 礼仪是什么——一个非常非常琐碎的答案（在你的代码中添加一个字符）。