垂直对齐页脚内容

Question

所以，我之前得到了帮助，但我的东西太杂乱无章，以至于我很难理解别人在做什么。它让我离开了这里，我有我的垂直对齐，但现在我的页脚由于某种原因被切断了一半，我的社交图标保持在我的电源旁边，即使它们应该是对齐/浮动到右边......

http://jsfiddle.net/4KDEM/

HTML

<div id="footer">
 <div id="footerContent">
 <div id="leftFooter">
 $POWERED_BY$
 </div>
 <div id="rightFooter">
 <a href="#"><img src="http://zevoxa.com/images/social/facebook.png" /></a>
 <a href="#"><img src="http://zevoxa.com/images/social/twitter.png" /></a>
 <a href="#"><img src="http://zevoxa.com/images/social/youtube.png" /></a>
 <a href="#"><img src="http://zevoxa.com/images/social/deviantart.png" /></a>
</div>
</div>
</div>

CSS

#footer {
 background-image:url('/images/footer_bg.png');
 bottom repeat-x;
 height: 110px;
 display:table-cell;
 vertical-align: middle;
}
#footerContent {
 display:table;
 width:100%;
}
#leftFooter {
 float: left;
 font-family:maven;
 font-size: 15px;
 padding-left: 20px;
}
#rightFooter {
 float: right;
 text-align:right;
}

Answer 1

您可以通过如下调整 CSS 来修复布局：

#footer {
    background-image:url('http://zevoxa.com/images/footer_bg.png');
    bottom repeat-x;
    width:100%;
    height: 110px;
}
#footerContent {
    display:table;
    width: inherit; /* You can adjust this depending on other design factors*/
    height: inherit;
}
#leftFooter {
    display:table-cell;
    vertical-align: middle;
    font-family:maven;
    font-size: 15px;
    padding-left: 20px;
    border: 2px dotted yellow; /* just to show where the edges are*/
}
#rightFooter {
    display:table-cell;
    vertical-align: middle;
    text-align:right;
    border: 2px dotted yellow;
}

见小提琴：http://jsfiddle.net/audetwebdesign/Pfrj8/

将#footerContent 设置为display: table 并从父元素（#footer）继承高度。您可以根据需要以多种方式设置宽度。在我的示例中，我将其设置为全宽，默认行为。

对于两个子元素，将它们的显示类型设置为table-cell 和vertical-align: middle，您已经正确设置了text-align。默认情况下，两个单元格的大小相同，为父单元格宽度的 50%。

不需要花车。

一边

您可能不需要两个包装器，#footer 和 #footerContent，除非您需要第二个 div 用于其他目的（例如额外的背景图像）。取决于您设计中的其他因素。 （参见小提琴中的第二个示例。）

Answer 2

如果您的网站不是响应式网站，您只需像这样添加宽度：#footer {width:500px;}