DIV以及图片水平垂直居中兼容多种浏览器
第一种：全CSS控制，层漂浮（适用于做登陆页面）
代码如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>My JSP</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<style type="text/css">
#divcenter{
position:absolute;/*层漂浮*/
top:50%;
left:50%;
width:300px;
height:300px;
margin-top:-150px;/*注意这里必须是DIV高度的一半*/
margin-left:-150px;/*这里是DIV宽度的一半*/
background:yellow;
border:1px solid red; }
</style>
</head>
<body>
<div id="divcenter"> this is a test </div>
</body>
</html>
第二种：JS + CSS控制，不漂浮（适用于做登陆页面）
代码如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>My JSP</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<script type="text/javascript">
function cen(){
var divname = document.all("testdiv");
//居中高度等于页面内容高度减去DIV的高度 除以2
var topvalue = (document.body.clientHeight - divname.clientHeight)/2;
divname.style.marginTop = topvalue;
}
//页面大小发生变化时触发
window.onresize = cen;
</script>
</head>
<body style="height:100%; width:100%; text-align:center;" onload=cen()>
<div id = "testdiv" name="testdiv" style="margin:0 auto; border:1px solid red; height:400px; width:400px;">
DIV居中演示
</div>
</body>
</html>
第三种：最简单适用的一种上下左右都居中，兼容所有浏览器
代码如下:
其他的方法：
纯css完美地解决图片在div内垂直水平居中，兼容IE7.0、IE6.0、IE5.5、IE5.0、FF、Opera、Safari
以下是程序代码
代码如下:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title></title>
<style type="text/css">
.img_v {
display:table-cell !important;
display:block;
position:static !important;
position:relative;
overflow:hidden;
width:400px;
height:400px;
border:1px solid #000;
vertical-align:middle;
text-align:center;
}
.img_v p {
display:table-cell !important;
display:block;
margin:0;
position:static !important;
position:absolute;
top:50%;
left:50%;
width:400px;
margin-left:auto;
margin-right:auto;
}
.img_v img {
position:static !important;
position:relative;
top:auto !important;
top:-50%;
left:auto !important;
left:-50%;
}
</style>
</head>
<body>
<div class="img_v">
<p><img src="http://www.jb51.net/images/logo.gif"></p>
</div>
</body>
</html>
DIV以及图片水平垂直居中兼容多种浏览器的更多相关文章
- 关于div中图片水平垂直居中的问题
最近在做一个项目,里面涉及到不固定尺寸要在div里面水平垂直居中显示 我没有用table布局,而是用了div+css,找了很久,终于在网上找到解决方案,特此记录备用 关键核心代码如下: <div ...
- 图片水平垂直居中（兼容IE6，IE7，firefox，opera，safari，其中图片可以是任何块元素）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 让图片在div盒子中水平垂直居中
//调整多张图片,让图片水平垂直居中 function adjustImg(){ let imgDiv = document.getElementsByClassName("img" ...
- CSS制作图片水平垂直居中
所谓的图片水平垂直居中就是把图片放在一个容器元素中(容器大于图片尺寸或是指定了大小的容器),并且图片位居此容器正中间(中间是指元素容器的正中间),而图片不是以背景图片(background-image ...
- 图文-水平垂直居中兼容ie6+
图文-水平垂直居中兼容ie6+ 具体代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8&q ...
- css实现图片水平垂直居中
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 真正的让iframe自适应高度 兼容多种浏览器随着窗口大小改变
今天有朋友问到我关于"iframe自适应高度"的问题,原本以为是很简单的问题,没想到折腾了20分钟才搞定.期间遇到几个问题,要么是高度自适应了,但是当窗口改变时会出现滚动条.也就是 ...
- CSS 实现图片灰度效果 兼容各种浏览器
CSS 实现图片灰度效果 兼容各种浏览器如360浏览器 CSS实现图片灰度效果就是通过CSS样式让彩色图片呈现为灰色,相当于把一张图像的颜色模式调整为灰度,CSS可以通过以下几种方法来实现灰度效果. ...
- 原生JavaScript拖动div兼容多种浏览器
说句题外话,虽然博客园嵌入式氛围不行,Web前端氛围还是很好的.我又从 chinaunix 回来了. <html> <head> <script type="t ...
随机推荐
- 带有OUTPUT的INSERT,DELETE,UPDATE
原文地址:http://blog.sina.com.cn/s/blog_71460d950100nld2.html OUTPUT是SQL SERVER2005的新特性.可以从数据修改语句中返回输出.可 ...
- flex-linkbutton
LinkButton 控件是没有边框的 Button 控件,当用户将鼠标移动到该控件位置时,其内容将加亮显示.这些特征通常借助包含在浏览器页面中的 HTML 链接进行展示.为使 LinkButton ...
- linux学习方法之六
相信不少想学习linux的新手们正愁不知道看什么linux学习教程好,下面小编给大家收集和整理了几点比较重要的教程,供大家学习,如需想学习更多的话,可到wdlinux学堂寻找更多教程. 1.linux ...
- android中控件公用产生的冲突的解决办法
1.ViewPager嵌套HorizontalScrollView滑动冲突的解决办法,重写ViewPager public class ZdyViewPage extends ViewPager { ...
- Hadoop 5、HDFS HA 和 YARN
Hadoop 2.0 产生的背景Hadoop 1.0 中HDFS和MapReduce存在高可用和扩展方面的问题 HDFS存在的问题 NameNode单点故障,难以用于在线场景 NameNode压力过大 ...
- Vim应用
:q!不保存退出 :set number显示行数 :wq保存并退出 ==先输入100,再输入==.从这行开始向下100行,进行自动缩进对齐
- 无组件客户端js图片压缩
<div class="free-upload"> <p>上传您的约会照片,一张合影.一张票据哦!</p> <div class=&quo ...
- MVC折线图应用
后台 获取值并转换成json数据存到实体里面,然后前台输出 HighchartsModels model = new HighchartsModels(); model.DataDicJson = J ...
- 天气情况（思维，dp思想）
天气情况 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Total Submi ...
- eclipse搭建Log4J日志环境
在hibernate使用的日志标准都为slf,slf可以看作为它的接口,因此需要找到它的实例,为我们做日志.我们选择使用log4j为实例. 1. 为防止冲突,先将slf4j-nop的jar包(它也是s ...