如何垂直对齐：将图片与文字中间对齐？

Question

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

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

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/