小技巧：用CSS如何?單行圖片與文字垂直置中

 

　　今天又在群中看到一些朋友問單行圖片文字垂直置中問題了，於是寫了這篇文章．

　　這個問題是在做頁面中經常會遇到的問題，首行我們先看一下最基礎的的吧！

　　以下選自（Css權威指南）

vertical-align
初始值：　baseline（預設值）
可否繼承：否
適用於：　內嵌元素
說明：vertical-align:baseline使元素的基準同父元素的基準對齊．
警告：vertical-align不能影響表格單元中的內容的對齊，對於塊元素中的內容也一樣．

　　文字不多，但時常有人範錯誤，有人說我用了為什麼沒有效果呢？首行看一下他的代碼．

．style{vertical-align:middle;.....}
Html:<div class="style"><img src="地址" />...<div>

　　分析：從上面的代碼可以看出錯誤就是把樣式應用在塊元素中了

　　我們只需要改樣式為

．style img{vertical-align:middle;.....}

　　如果STYLE中有其它如INPUT或其它內嵌元素可寫成

．style img,.style.input{vertical-align:middle;.....}
或
．style *{vertical-align:middle;.....}
/*在不影響其它元素的情況下使用這個萬用字元*/

　　以上是在沒有設定高度／行高的事情下，如果加入了高度和行高的事情下FF可以支援，IE6以下則不完全支援，看以下測試結果．（為了增加明顯的效果對圖片適當增加了高度）

　　總結：對於單行圖片文字垂直置中（有圖片的情況下）

　　1.當沒有高度行高時，我們只要簡單的對內嵌元素應用vertical-align:middle;就可以了．此外對於一個圖片和文字的高度相差無幾的，不用這個樣式也是可以的．

　　2.對於有行高或有行高＋高度的,FF可以正確顯示,ie6失效．所以也只能對IE6以下版本使用KACK了！，現在IE7已經改正了這個錯誤．

　　3．對2補充一下，可以用不定高度，用上下補白的方法，這樣就可以相容IE6了。