DIV以及图片水平垂直居中兼容多种浏览器

当前位置 : 首页 > 网页制作 > 心得技巧 > DIV以及图片水平垂直居中兼容多种浏览器

DIV以及图片水平垂直居中兼容多种浏览器

来源:互联网 作者:脚本宝典 时间:2015-09-02 12:58
第一种:全CSS控制,层漂浮(适用于做登陆页面) 复制代码 代码如下: %@ page language=java import=java.util.* pageEncoding=UTF-8% !DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN html head titleMy JSP/tit

第一种:全CSS控制,层漂浮(适用于做登陆页面) 

复制代码

代码如下:


<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> 
<!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控制,不漂浮(适用于做登陆页面) 

复制代码

代码如下:


<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> 
<!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> 


第三种:最简单适用的一种上下左右都居中,兼容所有浏览器 

复制代码

代码如下:


<div style="position:absolute; top:50%; height:240px;border:1px solid red; margin:0 auto; margin-top:-120px; width:300px; left:50%; margin-left:-150px;"></div> 


其他的方法:
纯css完美地解决图片在div内垂直水平居中,兼容IE7.0、IE6.0、IE5.5、IE5.0、FF、Opera、Safari 
以下是程序代码 

复制代码

代码如下:


<html> 
<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.t/images/logo.gif"></p> 
</div> 
</body> 
</html> 


Tag:
网友评论

<