垂直对齐被忽略

我有以下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

垂直对齐被忽略

回答

相关问题