div中的垂直对齐被忽略

时间:2011-12-29 22:55:39

标签: css html

我有以下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的内容不是在中间对齐,而是在底部。我错过了什么?

2 个答案:

答案 0 :(得分:1)

如果您将vertical-align: middle;设置为img标签和a标签,那么它们将对齐。

我还会将版权放入span标记并设置垂直对齐。

我把它全部放在jsFiddle中:http://jsfiddle.net/qJk4s/

(因为你绝对定位它,你需要向下滚动才能看到页脚)

答案 1 :(得分:0)

它与中间对齐,但你没有给它足够的空间,你注意到差异。删除注释以给页脚一些高度,你会看到文本在中间,图像是,相应地,3px离开底部如果你删除'display:table-cell'我不知道为什么那是那里或需要。