DIV和照片水平竖直垂直居中适配多种多样访问器

日期:2021-03-21 类型:科技新闻 

关键词:在线小程序开发,微信小程序怎么做店铺,小程序logo设计,小程序平台,小程序码生成

第1种:全CSS操纵,层漂浮(可用于做登录网页页面)

拷贝编码
编码以下:

<%@ page language="java" import="java.util.*" pageEncoding="UTF⑻"%>
<!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:⑴50px;/*留意这里务必是DIV高宽比的1半*/
margin-left:⑴50px;/*这里是DIV宽度的1半*/
background:yellow;
border:1px solid red; }
</style>
</head>
<body>
<div id="divcenter"> this is a test </div>
</body>
</html>

第2种:JS + CSS操纵,不漂浮(可用于做登录网页页面)

拷贝编码
编码以下:

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

第3种:最简易可用的1种左右上下都垂直居中,适配全部访问器

拷贝编码
编码以下:

<div style="position:absolute; top:50%; height:240px;border:1px solid red; margin:0 auto; margin-top:⑴20px; width:300px; left:50%; margin-left:⑴50px;"></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:⑸0%;
left:auto !important;
left:⑸0%;
}
</style>
</head>
<body>
<div class="img_v">
<p><img src="https://www.jb51.net/images/logo.gif"></p>
</div>
</body>
</html>