1

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

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

2 回答 2

2

您可以通过调整 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-celland vertical-align: middle，您已经以正确的方式设置了 text-align 。默认情况下，两个单元格的大小相等，为父单元格宽度的 50%。

不需要花车。

在旁边

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

于 2013-05-15T01:33:22.727 回答
-1

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

于 2013-05-15T01:34:51.363 回答