首页
行业
前端
特效
人生
知识库
站内搜索：
首页
>>
前端
>> 内容
图片垂直居中之姊妹 DIV垂直居中
时间：2008/7/9 18:55:18
最后感谢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> <div id="middle" align="absmiddle"></div> <!--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> <div id=menu>页面水平垂直居中</div> </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> <div id=menu>页面水平垂直居中</div> </body> </html>
[Ctrl+A 全选 注:
如需引入外部Js需刷新才能执行
]
上一篇：
div的dispaly:inline样式 和span的区别
下一篇：
input file 不能更改value值的解决办法
用户评论
已有
0
人评论
阅读更多评论
相关文章
·
实现垂直居中的几种方法介绍
·
图片轮播代码实现教程
·
图片标签代码实现
·
图片处理教程之图片宽高自适应及居中方法
·
vue图片左右滑动及手势缩放功能代码实现教程
·
图片以Base64编码方式，并以byte类型保存到数据库的方法
·
一组图片实现无缝轮播的代码教程
·
垂直水平居中的四种方式（已知元素高度or元素高度未知）
·
小程序图片排列扭曲问题解决
·
CSS垂直水平居中多种实现教程
返回顶部
