水平與垂直置中 第四頁

圖片的置中方法三。乾脆放在背景圖比較簡單。 <style type='text/css'> .pic4 {width:350px; height:250px; border:solid 1px red; } </style> 中央 <div class=pic4 style='background:no-repeat center center url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmkRzQhhtbzJZB2AZE3Ud_K4poNGAX7hjwO2OoBd8SNHhRMffYRfw9qSeNFexU7Ujwl_U6lb2RYPn3Dc4kJ8d8zE5LnmY2Gz6CMS7I37b1PUw5fYZLQIcEIxMI8Dqv2mYFEjEawXtTJZs/s200/shape.jpg)' > </div>

使用 javascript 將元素置中。下面的範例在 IMG 元素加上 ONLOAD 啟動置中的函式 centerMe()；此函式使用 parentNode, clientHeight, clientWidth 與數學函式 floor() 計算 margin。如果使用者的瀏覽器沒有開啟 javascript，此法會失效；但是機率很小，應該可以忽略。 <script type='text/javascript'> function centerMe(obj) { obj.style.margin=Math.floor( (obj.parentNode.clientHeight-obj.clientHeight)/2 )+'px ' + Math.floor( (obj.parentNode.clientWidth-obj.clientWidth)/2 )+'px'; } </script> <style type='text/css'> .pic5 {width:350px; height:250px; border:solid 1px red; } </style> 中央 <div class=pic5> <img onload='centerMe(this)' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmkRzQhhtbzJZB2AZE3Ud_K4poNGAX7hjwO2OoBd8SNHhRMffYRfw9qSeNFexU7Ujwl_U6lb2RYPn3Dc4kJ8d8zE5LnmY2Gz6CMS7I37b1PUw5fYZLQIcEIxMI8Dqv2mYFEjEawXtTJZs/s200/shape.jpg" /> </div>

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

:

第一頁

第二頁

第三頁

第四頁