如何垂直对齐：在图片中间添加文字？

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

卸下开的元件，浮动一个向左和应用边距 - http://jsfiddle.net/edY2Y/