DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> DIV十CSS布局 >> 布局實例 >> CSS圖片垂直居中方法整理集合
CSS圖片垂直居中方法整理集合
編輯:布局實例     

看到問此問題的很多,所以花點時間整理下,歡迎大家提意見,做補充修改,謝謝!
/*lesliezmz整理的方法 2010-01-19*/
當writing-mode為tb-rl 時,文檔流是從上到下,從右到左書寫。然後設置text-align: center就可以實現垂直方向上的居中。算是一個小技巧吧。
原帖鏈接:IE6下用writing-mode實現 未知高度替換元素垂直居中。


 提示:您可以先修改部分代碼再運行 /*lesliezmz 粘貼結束 */

/*yoom 粘貼開始 2010-01-18*/

因為Opera,FF3,IE8均支持display:talbe;這些特性了,因此改進的辦法是:



 提示:您可以先修改部分代碼再運行

如果不喜歡條件注釋,可自行將代碼以css hack的方式拼湊起來。


原帖鏈接:

未知高寬的圖片垂直局中
/*yoom 粘貼結束*/

 提示:您可以先修改部分代碼再運行

標准浏覽器下另類方法:



 提示:您可以先修改部分代碼再運行

標准浏覽器嚴格型申明下:



 提示:您可以先修改部分代碼再運行

利用字體大小的方法:



 提示:您可以先修改部分代碼再運行

display:inline-block 方法



 提示:您可以先修改部分代碼再運行

最簡單當然是背景圖片的方法拉。



 提示:您可以先修改部分代碼再運行

 

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