首页 > 网页制作 > 心得技巧

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

admin 心得技巧 2022-02-06 22:07:00 DIV   水平居中   垂直居中"

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

复制代码代码如下:
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>



My JSP








this is a test




第二种:JS + CSS控制,不漂浮(适用于做登陆页面)

复制代码代码如下:
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>



My JSP





<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>



DIV居中演示




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

复制代码代码如下:


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

复制代码代码如下:












版权声明

本文仅代表作者观点,不代表本站立场。
本文系作者授权发表,未经许可,不得转载。
本文地址:/web/xinde/79097.html

留言与评论(共有 0 条评论)
   
验证码:

潘少俊衡

| 桂ICP备2023010378号-4

Powered By EmpireCMS

爱享小站

中德益农

谷姐神农

环亚肥料

使用手机软件扫描微信二维码

关注我们可获取更多热点资讯

感谢潘少俊衡友情技术支持