Question

这是我的jsFiddle http://jsfiddle.net/YrYH6/2/

如何将Facebook和Twitter图标与 Logout 文本对齐？

CSS：

#header_bg {
    background: #444444;
    height: 20px;
    position: absolute;
    width: 100%;
    z-index: -1;
}
#header {
    background: url("http://i.imgur.com/HXC7Q.png") repeat-x scroll center bottom transparent;
    height: 30px;
    padding: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 2;
}

HTML：

<div id="header">
    <div id="header_bg">&nbsp;</div>
    <open style="font-size: 0.7em; color: rgb(255, 255, 255); float: right; margin-top: 7px; margin-right: 75px;">
        <a href="#" target="_blank"><img src="http://i.imgur.com/pYAtH.png"></a>
        <a href="#" target="_blank"><img src="http://i.imgur.com/LnMhg.png"></a>
        <a href="#" style="color: rgb(255, 255, 255);">Logout</a>
    </open>
</div>

Answer 1

最简单的解决方案，无需更改标记即可使用：

a,img{vertical-align:middle}

实例：http://jsfiddle.net/tw16/YrYH6/4/

对于更精细的调整，如果你这样做，对齐似乎好一点：

img{vertical-align:top}
a{vertical-align:middle}

Answer 2

我将链接放在span中，然后应用这些样式

span{
    display:inline-block;
    vertical-align:top;
    padding:0;
}

示例： http://jsfiddle.net/YrYH6/3/

Answer 3

删除打开的元素，将a浮动到左侧并应用边距 - http://jsfiddle.net/edY2Y/

如何纵向对齐：中间带文字的图片？

3 个答案: