垂直對齊被忽略

我有以下DIV：垂直對齊被忽略

<div id="footer"> 
Copyright 2011 <a href="http://www.mauricederegt.com" target="_blank">mauricederegt.com</a> | <img src="images/facebookIconSmall.jpg" alt="" /> 
<a href="http://apps.facebook.com/mahjong_solitaire/" target="_blank">Facebook</a> | <img src="images/twitter.gif" alt="" /> 
<a href="https://twitter.com/mahjonggame" target="_blank">Twitter</a> 
</div>

有了這個CSS：

#footer { 
    position: relative; 
    z-index:999999; 
    width: 760px; 
    /*height: 50px;*/ 
    top: 617px; 
    vertical-align: middle; 
    border: 1px solid #333; 
    text-align: center; 
    font-size:11px; 
    display:table-cell; 
} 

#footer img { 
    position:relative; 
    bottom: -3px; 
}

但加載這個時候，div的內容是不是在中間對齊，但在底部。我錯過了什麼？

來源

2011-12-29 Maurice

你想讓文字與圖像的中心線對齊嗎？因爲它是你的頁腳對象沒有指定高度，所以我會假設它是自動調整大小的。 – lsuarez 2011-12-29 23:02:59

'display：table-cell'不適用於所有瀏覽器。 – Sparky 2011-12-29 23:05:13

如果您將vertical-align: middle;設置爲img標籤和a標籤，那麼它們將對齊。

我也將版權放入span標籤並設置垂直對齊。

我把它們都放在一個的jsfiddle：http://jsfiddle.net/qJk4s/

（您需要向下滾動才能看到尾，雖然，因爲你絕對定位的話）

來源

2011-12-29 23:08:15 Wasbazi

謝謝，這對我很好 – Maurice 2011-12-30 20:25:34

它對準中間，但你不給它足夠的空間，你會注意到不同之處。刪除評論給頁腳一些高度，你會看到文字在中間，如果你刪除'display：table-cell'，那麼我的圖片就是3px，如果你不知道爲什麼那裏或需要。

來源

2011-12-29 23:39:47 Rob

垂直對齊被忽略

回答

相關問題