垂直对齐页脚内容

所以，我得到了以前的帮助，但是我的东西没有组织，所以我很难理解某人在做什么。它让我离开这里，我有我的垂直路线，但现在因为某种原因，我的页脚中途切断了，我的社交图标保持在我的动力旁边，即使他们想要对齐/漂移到右侧。垂直对齐页脚内容

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

来源

2013-05-15 Zevoxa

您可以通过调整你的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，您已经以正确的方式设置了文本对齐方式。默认情况下，这两个单元格大小相等，即父宽度的50％。

不需要漂浮物。

除了

您可能没有，除非你需要第二次DIV用于其他目的（例如额外的背景图片）需要两个包装，#footer和#footerContent。取决于您设计中的其他因素。（见小提琴第二个例子。）

来源

2013-05-15 01:33:22

如果我没必要#footerContent，然后在那里我可能会放宽度：继承;高度：继承;？ – Zevoxa

对不起，我的意思是你可能只需要#footerContent或#footer。你可以在一个div上设置宽度，高度，显示，背景属性，但正如我所说，这是可选的，取决于你想要做什么。无论哪种方式都很好。我用第二个例子更新了小提琴，以便说清楚。 –

-1

如果您的网站是不是一个负责任的网站，你只需要添加像这样的宽度：#footer {width:500px;}

来源

2013-05-15 01:34:51 ArleyM

垂直对齐页脚内容

回答

相关问题