垂直對齊頁腳內容

所以，我得到了以前的幫助，但是我的東西沒有組織，所以我很難理解某人在做什麼。它讓我離開這裏，我有我的垂直路線，但現在因爲某種原因，我的頁腳中途切斷了，我的社交圖標保持在我的動力旁邊，即使他們想要對齊/漂移到右側。垂直對齊頁腳內容

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

垂直對齊頁腳內容

回答

相關問題