如何通过CSS将内部div与外部div正确对齐

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

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

就像在excel中的单元格对齐方式中选择“水平：中心”、“垂直：底部”时一样

理想的解决方案是什么？我不擅长css。

---

Javascript是不可能的。

不太确定，但我认为您必须使用相对而不是绝对，这取决于页脚中的确切内容，但这里有一个解决方案，假设它是简单的文本：

<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>

带着

---

还取决于图像是什么，您可能可以完全去掉内部div，只需使用一些填充顶部将内容向下推。

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

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

这将使页脚内容div居中。为了更进一步，让我们也将div定位为顶部边距：

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

这将使页脚内容div居中，并将其向下推25px。如果您确定div的确切尺寸，那就太好了，您可以使用它。如果你想更灵活一点

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

#footer {
    position: relative;
}

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

这将相对其包含元素footer定位footer\u内容。在这个例子中，我把它从页脚底部向上放置10px，从左边缘放置50px。还可以使用“顶部”和“右侧”属性相对于这些边定位div

要了解有关CSS框模型的更多信息，请查看以下内容：

好，如果您的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>

---

较小的div是否也可以有固定的高度？@LapinLove:如果需要，可以。但我以后可能不得不修改它@kjy112:文本和图标这些也可以居中文本和图标居中并位于页脚div的底部位置：relative不使用相对于其包含元素的位置来定位元素。它将相对其正常位置进行定位。要使用相对于其包含元素的位置来定位元素，您需要为包含元素设置position:relative和position:absolute-To-your元素请参见roryf的回答我不想在这里分门别类，但正常位置已由包含元素指定。子元素相对于父元素可以相对定位或绝对定位。父元素不必具有特定的位置类型。看到这把小提琴了吗：上面和左边的位置看起来不错。。。但是试试底部：10px：要了解更多关于CSS定位的信息，请看我想的是错误的。你是对的-如果你想根据外部的边界来定位内部div，那么位置必须是绝对的，容器必须是非静态的。我会修正我的答案。

<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>

#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%;
}