CSS圖片垂直居中方法整理集合

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

CSS圖片垂直居中方法整理集合

編輯：布局實例

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

<!DOCTYPE  html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html  xmlns="http://www.w3.org/1999/xhtml"> <head>  <title>利用定位來顯示垂直局中的圖片</title> <style type="text/css">  .miao {   width:500px;   height:220px;   line-height:220px;   border:  1px solid;   text-align: center; } .miao img {   vertical-align: middle;  } </style>  </head> <body>  <h1>固定高寬的容器中，圖片垂直局中。</h1> <p>使用的絕對定位和相對定位的方法</p>  <div class="miao"> 	<span><img  src="http://bbs.blueidea.com/images/default/logo.gif" alt="Logo"  /></span>你知道的太多了你知道的太多了你知道的太多了 </div> <hr />  <div class="miao"> 	<span><img  src="http://bbs.blueidea.com/images/default/logo.gif" alt="Logo"  /></span>你知道的太多了你知道的太多了你知道的太多了 </div> <hr />  <div class="miao"> 	<span><img  src="http://www.google.cn/intl/zh-CN/images/logo_cn.gif" alt="Google"  /></span>你知道的太多了 </div> </body> </html>

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

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

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

<!DOCTYPE  html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html  xmlns="http://www.w3.org/1999/xhtml"> <head> <meta  http-equiv="Content-Type" content="text/html; charset=utf-8" />  <title>利用定位來顯示垂直局中的圖片</title> <style type="text/css">  .miao{width:170px;height:100px;display:table;text-align:center;border:solid  1px red;} .miao  span{display:table-cell;vertical-align:middle;border:solid 1px blue;}  .miao span img{border:dashed 1px green;} </style>  </head> <body>  <h1>固定高寬的容器中，圖片垂直局中。</h1>  <p>綠色容器是span，目的是使自己的左上角與容器中心點對齊。紅色是具體圖片，再次設置負值使自己的中心點和父容器的中心點重合，最終 達到垂直局中的目的。</p> <div class="miao"> 	<span><img  src="http://bbs.blueidea.com/images/default/logo.gif" alt="Logo"  /></span> </div> <hr /> <div class="miao"  style="width:300px;height:80px;"> 	<span><img  src="ttp://bbs.blueidea.com/images/default/logo.gif" alt="Logo"  /></span> </div> <hr /> <div class="miao"  style="width:500px;height:220px;"> 	<span><img  src="http://www.google.cn/intl/zh-CN/images/logo_cn.gif" alt="Google"  /></span> </div> </body> </html>

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

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

原帖鏈接：

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

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

標准浏覽器下另類方法:

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

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

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

利用字體大小的方法：