水平與垂直置中 第三頁

圖片的置中方法一。由於圖片是文字行元素，所以水平置中可以用 text-align:center。垂直置中的方法很多，下面使用的方法涵蓋了 IE6, Firefox, Safari, Chrome 等多種瀏覽器，參見 Centering (horizontally and vertically) an image in a box。這個方法的特點就是要在 IMG 元素 前加上文字行元素，例如 <i></i>，內容留空；然後在風格表中宣告此元素是 height:100%; display:inline-block。 <style type='text/css'> .out {width:350px; height:250px; border:solid 1px red; font-size:0px; } .out * {vertical-align:middle;} .out I {height:100%; display:inline-block; } </style> 水平置中 <div class=out style='text-align:center'> <img src="http://2.bp.blogspot.com/_66l2ZxYOqcM/SQpEq0sqwOI/AAAAAAAAAC4/wwqnnrUxjjk/s200/shape.jpg" /> </div> 垂直置中 <div class=out> <i></i> <img src="http://2.bp.blogspot.com/_66l2ZxYOqcM/SQpEq0sqwOI/AAAAAAAAAC4/wwqnnrUxjjk/s200/shape.jpg" /> </div> 中央 <div class=out style='text-align:center'> <i></i> <img src="http://2.bp.blogspot.com/_66l2ZxYOqcM/SQpEq0sqwOI/AAAAAAAAAC4/wwqnnrUxjjk/s200/shape.jpg" /> </div>

圖片的置中方法二。水平置中使用 text-align:center。垂直置中將父元素的 line-height 設為 height，IMG 元素設為 vertical-align:middle；此法只能在 Firefox, Safari, Chrome 達成垂直置中；要在 IE6 達成垂直置中，還必須加上 margin:expression()。expression() 這行在個人電腦測試正常，可是移到部落格之後，會導致 IE6 停頓，所以用註解取消其功能；使用時請多測試。 <style type='text/css'> .pic3 {width:350px; height:250px; border:solid 1px red; text-align:center; line-height:250px; } .pic3 IMG {vertical-align:middle; /* margin:expression(Math.floor( (this.parentNode.clientHeight-this.clientHeight)/2 )+'px auto'); */ } </style> 中央 <div class=pic3> <img id='im3' src="http://2.bp.blogspot.com/_66l2ZxYOqcM/SQpEq0sqwOI/AAAAAAAAAC4/wwqnnrUxjjk/s200/shape.jpg" /> </div>

水平與垂直置中（你正在看 第三頁）

:

第一頁

第二頁

第三頁

第四頁