DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS詳解 >> CSS實現單行圖片與文字垂直居中
CSS實現單行圖片與文字垂直居中
編輯: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了。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved