如何垂直對齊：在圖片中間添加文字？

這是我的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>

來源

2011-09-18 Jeksiliki

什麼是。從來沒有遇到過這個元素。 JUst將所有放在一個容器div中並向左浮動。重新點亮以清除浮動。 - http://jsfiddle.net/U4qav/ – Jawad

的最簡單的解決方案，它無需改變標記只是使用：

a,img{vertical-align:middle}

活生生的例子：http://jsfiddle.net/tw16/YrYH6/4/

對於細調教下，調整似乎好一點，如果你這樣做：

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

來源

2011-09-18 17:07:18 tw16

+1我應該想到這個！ ;-) –

@jason：好吧，我們可以使用它！它應該只適用於每一個元素！ – tw16

謝謝你 – Jeksiliki

我把鏈接在span，然後應用這些樣式

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

實施例：http://jsfiddle.net/YrYH6/3/

來源

2011-09-18 16:26:30

卸下開的元件，浮動一個向左和應用邊距 - http://jsfiddle.net/edY2Y/

來源

2011-09-18 16:27:39 Jawad

也許你應該_actually remove_'open'元素... – Eric

@Eric：讓他做一些工作夥伴！ – Jawad

你的措辭使它看起來像你已經做到了！ – Eric

如何垂直對齊：在圖片中間添加文字？

回答

相關問題