圖片垂直置中之姊妹 DIV垂直置中_經驗交流
來源：互聯網
上載者：User
最後感謝raozou分享效果代碼!<style type="text/css"> <!-- #middle { background:blue; position:absolute; left:expression((body.clientWidth-50)/2 + "px"); top:expression((body.clientHeight-50)/2 + "px"); width:50px; height:50px; } --> </style> <!--absmiddle 映像的中間與同一行中最大元素的中間對齊。 -->
[Ctrl+A 全選 注:如需引入外部Js需重新整理才能執行]
說明:這段代碼沒有文件類型和命名空間的申明,我已試過,如果加上,藍色方快兒將位於頂部且一部分
被瀏覽器隱藏,大家可以試試!此外,FF不支援expression.
<!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=gb2312" /> <title>DIV垂直置中</title> <style type="text/css"> #menu { position: absolute; top: 50%; left: 50%; margin-top: -25px; margin-left: -150px; color:blue; width: 300px; height: 50px; border:solid 1px gray; } </style> </head> <body> 頁面水平垂直置中 </body> </html>
[Ctrl+A 全選 注:如需引入外部Js需重新整理才能執行]
<!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=gb2312" /> <title>DIV垂直置中</title> <style type="text/css"> #menu { position: absolute; top: 50%; left: 50%; margin-top: -25px; margin-left: -150px; color:blue; width: 300px; height: 50px; font-weight:bold; border:solid 1px gray; line-height:50px; font-size:20px; text-align:center; } </style> </head> <body> 頁面水平垂直置中 </body> </html>
[Ctrl+A 全選 注:如需引入外部Js需重新整理才能執行]
