Question

我有一个页脚div，它是一个简单的div，它有一个固定的高度和（并且它有一个背景图片，这就是为什么这是必要的。）

我希望它包含另一个较小的div，但是所有文本和其中的小图标应该与页脚div的中间对齐。此外，我希望较小的div位于页脚div的底部。

与选择水平时相似：中心，垂直：在Excel中的单元格对齐底部。

这是什么理想的解决方案？我对css不好。 Javascript是不可能的。

Answer 1

取决于页脚的确切内容，但这是一个解决方案，假设它是简单的文本：

<style>
#footer {
    height: 100px;
    position: relative;
    width: 800px;
}

#footer .inner {
    bottom: 0px;
    position: absolute;
    text-align: center;
    width: 100%;
}
</style>

<div id="footer">
    <div class="inner">some text</div>
</div>

使用jsfiddle

还取决于图片的内容，您可以完全取消内部div，只需使用一些padding-top来推送内容。

Answer 2

不太确定，但我认为你必须使用“亲戚”而不是“绝对”

Answer 3

HTML很简单。我想你已经有了这个部分：

<div id="footer">
    <div id="footer_content">
        footer stuff goes here
    </div>
</div>

CSS也不太复杂。你已经拥有了#footer的CSS。我正在设置#footer_content width＆amp;高度为400px和60px - 你必须根据自己的需要选择大小。

#footer_content {
    width: 400px;
    height: 60px;
    margin: 0 auto;
}

这将使#footer_content div居于中心。为了更进一步，让我们将div置于上边距：

#footer_content {
    width: 400px;
    height: 60px;
    margin: 25px auto;
}

这将使#footer_content div居中并将其向下推25px。如果你确定div的确切尺寸，这很好，你可以使用它。如果你想要更灵活一点......

#footer_content {
    width: 400px;
    height: 60px;
    position: absolute;
    bottom: 10px;
    left: 50px;
}

#footer {
    position: relative;
}

#footer的CSS是您可能拥有的任何其他CSS的补充。如果您已经设置了该位置，则该位置可以设置为绝对位置或固定位置 - 它不能设置为静态。

这将使#footer_content相对于它的包含元素#footer。在这种情况下，我将它从#footer的底部向上放置10px，从左边缘放置50px。您还可以使用top和right属性来相对于这些边定位div。

要了解有关CSS Box模型的更多信息，请查看：http://css-tricks.com/the-css-box-model/

Answer 4

好的，如果你的HTML是

<div id="footer">
    text and <img src="icons.gif" /> (these could be centered too)
        <div id="footersfooter">
            text and <img src="another icons.gif" /> centered and on the bottom of the footer div
        </div>
</div>

尝试使用（roryf的修改代码以#footer内容为中心）

#footer {
    height: 100px;
    position: relative; /* important to position .inner relatively to #footer */
    text-align: center;
    width: 800px;
}

#footer .inner {
    bottom: 0px;
    position: absolute;
    width: 100%;
}

如何通过CSS正确对齐外部div中的内部div

4 个答案: