Question

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

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

垂直对齐页脚内容

2 个答案: