Question

我已经阅读过这里和其他人的无数线索，但还没有找到适合我的线程。我试图让这个darn div居于我页面的底部。它有点像页脚，但不完全是。

HTML：

<div id="menucontainer">
    <div id="menu">
        <ul>
            <li><a href="http://www.uah.edu"><img style="width:270px; height:150px; padding-right:25px; padding-top:15px;" src="style/images/UAH.png"></a></li>
            <li>another big test</li>
        </ul>
    </div>
</div>

CSS：

#menucontainer{
    position:fixed;
    bottom:0;
}

#menu{
    position:fixed;
    padding-top:5px;
    padding-bottom:15px;
    background-color:rgba(0,0,0,0.5);
    bottom:0px;
    height:200px;
    width:1218px;
    border:3px solid #000000;
    box-shadow:0px -5px 5px #888888;
}

li{
    float:left;
    margin-left:-10px;
    margin-right:-10px;
    text-align:center;
    list-style:none;
    height:190px;
    width:300px;
    border-left:2px solid #FFFFFF;
    border-right:2px solid #FFFFFF;
}

Answer 1

这应该是你所需要的：

#menucontainer {
    position: fixed;
    bottom: 0;
    width: 100%; /* ADD - make sure this container spans the entire screen */
    text-align: center; /* Align contents to the center */
}

#menu {
    /* remove position: fixed */
    display: inline-block; 
    margin: 0 auto;   /* Centers the block */
    text-align: left; /* Reset the text alignment */
    ... /* The rest stays the same */
}

Answer 2

   <style>
        #menucontainer{
        position:absolute;
        bottom: -420px;
        height: 200px;
        margin: 0 auto;
        position: relative;
        width:1218px;
        }

        #menu{
        position: relative;
        padding-top:5px;
        padding-bottom:15px;
        background-color:rgba(0,0,0,0.5);
        bottom:0px;
        height:200px;
        border:3px solid #000000;
        box-shadow:0px -5px 5px #888888;
        }

        li{
        float:left;
        margin-left:-10px;
        margin-right:-10px;
        text-align:center;
        list-style:none;
        height:190px;
        width:300px;
        border-left:2px solid #FFFFFF;
        border-right:2px solid #FFFFFF;
        }
       </style

enter image description here

Answer 3

DEMO

我做了一些基本的改变。首先，你的#menucontainer。你不需要固定的位置 - 我们可以使用'粘性页脚'技术使它总是挂在底部;我们知道宽度，margin: 0 auto;将帮助我们水平居中。

#menucontainer{
    position:relative; 
    width: 1218px;
    height:200px;
    margin: 0 auto;   
}

第二，我添加了一些虚假内容（.fake-content div），以帮助您了解这一切将如何在网站上看到。

我还添加了clearfix方法，用于正确渲染具有浮动子元素的元素。更多信息here（在其他地方也很容易找到）。

粘性页脚技术取自CSS Tricks site

有任何问题吗？那是你在找什么？

不能固定中心

3 个答案: