html中页面缩放为何不居中,浏览器窗口放大缩小后页面内容居中解决方法
先说下简单的思路:
1.获得窗口的大小,高度,宽度。
2.要知道显示的图片(我这里用图片举例)的大小,宽,高。(我的图片显示设置为 宽:960,高600 )
3.简单算法,获得的浏览器宽,高 减去 图片的宽,高 除以2 就是 间隔距离了。
4.当然还有获得窗口放大,缩小的事件了。根据事件来设置(margin)。
首先将图片弄到body里面,代码如下:
(不知道怎么添加代码块,只有写出来了。)
body 里面就只有两个div 图片套了一下。
加点 CSS 样式:(吐槽下:我对CSS 不专业。)
#_back{
border:#F00 1px solid;
z-index:0;
text-align:center;
padding:0px 0px 0px 0px;
}
#_total {
width:960px;
height:600px
border: 1px solid black;
position: relative;
padding:0px 0px 0px 0px;
}
#_mag {
width:960px;
height:600px
padding:0px 0px 0px 0px;
}
重点是下面的代码:
先解释下:jquery自带的 resize() 方法是可以监听窗口放大缩小事件的。但是我在网上搜索了下:jquery 自带的 resize() 方法在IE下会执行两次。
下面的这些代码是 W3CSCHOOL 上面的样例源码,测试之 resize() 方法是执行的两次。
x=0;
$(document).ready(function(){
$(window).resize(function() {
$("span").text(x+=1);
});
});
窗口大小被调整过 0 次。
请试着重新调整浏览器窗口的大小。
所以我在这里用了别人重写的resize()方法的插件。 jquery.ba-resize.js
这个是插件的下载地址:点击打开链接。
用这个插件直接一样的 $("selecter").resize(handler); 语法写。
下面就是js代码了。
$(document).ready(function(){
// 这里是窗口刚刚打开的时候,页面中的图片就要居中显示。
//网页可见区域宽:
var width = document.documentElement.clientWidth;
//网页可见区域高:
var height = document.documentElement.clientHeight
var n = height - 600;
if (n > 0) {
n = n / 2;
n += "px";
$("#_total").css("margin-top",n);
}
// 这里控制的是 margin-top 属性
// 其实 < 0 的时候不用考虑 图片的高度,直接 margin-top = 0px 就可以了。我这里是改变了图片显示的高度。
if (n < 0) {
$("#_total").css("margin-top","0px");
height += "px";
$("#_total").css("height",height);
}
// 同样的 判断宽
var aw = width - 960;
if (aw > 0) {
aw = aw/2;
aw += "px";
$("#_total").css("margin-left", aw);
}
if (aw < 0){
$("#_total").css("margin-left", "0px");
}
// 这里就是 监控 窗口放大缩小的事件了。
$(window).resize(function(){
// 一样的 获得当前的 高度和宽度
// 重点说下这个 document.documentElement.clientWidth 如果在标签上面没有写 这句话。
//document.documentElement.clientWidth 在IE下是获取不到值得,鉴于规范,还是写上这句 var _width = document.documentElement.clientWidth;
var _height = document.documentElement.clientHeight;
var w = _width - 960;
var h = _height - 600;
if (w > 0) {
w = w/2;
w+= "px";
$("#_total").css("margin-left", w);
}
if(w < 0) {
$("#_total").css("margin-left", "0px");
}
if (h > 0) {
h = h/2;
h+="px";
$("#_total").css("margin-top", h);
}
if (h < 0) {
$("#_total").css("margin-top", "0px");
}
});
});
这是我想出的方法来解决这个问题。希望能够看懂。
如果有更好的防解决 “窗口放大缩小后内容居中的问题”可以相互讨论。
转载自:http://m.blog.csdn.net/blog/qqyangwang/8513662
html中页面缩放为何不居中,浏览器窗口放大缩小后页面内容居中解决方法相关推荐
- 360中不显示html中图片不显示,360安全浏览器浏览网页不显示图片怎么办?解决方法...
使用360安全浏览器浏览网页时,我们遇到了无法在网页上显示图片的问题.这时候我们该怎么办?我们可以转到360安全浏览器的网页设置来查看是否未显示图片,或者使用360安全浏览器维修医生来修复浏览器,让我 ...
- 防止通过鼠标滑轮放大缩小造成页面的变形!
DIV+CSS布局中,在做顶部大Banner的时候,可以通过在body中写入 min-width: 1200px; 防止通过鼠标滑轮放大缩小造成页面的变形!
- html页面在ie上出现404怎么解决,ie浏览器网页上有错误显示不全的解决方法
ie浏览器网页上有错误显示不全的解决方法 有时候打开网页发现内容的排版比较混乱,比如上下两行的文字部分重叠,字体大小看起来很不协调,本来是一行的文字显示成两行,等等.这是因为浏览器的设置出了问题,很多 ...
- Visual Studio 2008 当页面进行调试时,IE8浏览器显示的是空白页面?
Visual Studio 2008 当页面进行调试时,IE8浏览器显示的是空白页面? [ 标签:studio 调试,浏览器,空白 ] Say goodbye 回答:2 人气:2 提问时间:2009- ...
- html没有注册类,电脑中ie浏览器提示没有注册类别的三种解决方法
ie浏览器功能十分强大,能够给我们带来很棒的网页浏览体验.不过,一些朋友反馈自己在使用ie浏览器过程中,突然遇到"没有注册类别"的出错提示,这是怎么回事呢?其实这是文件的丢失等原因 ...
- win7html文件,教你win7浏览器打不开本地html文件格式的解决方法
最近有用户反馈,遇到了html文件打不开,一直显示主页而不是html页面,其实很大部分是浏览器设置问题.有什么办法可以解决?针对此疑问,下面小编教你win7浏览器打不开本地html文件格式的解决方法. ...
- flash 火狐总是崩溃_火狐浏览器提示插件Adobe Flash已崩溃的解决方法
解决方法: 1.在火狐浏览器出现的"插件Adobe Flash已崩溃"提示中,点击"详细了解"; 2.进入火狐崩溃报告网页,找到"我该如何防止插件崩溃 ...
- 微信自带浏览器被输入法阻挡文本框的 jQuery 解决方法 by FungLeo
微信自带浏览器被输入法阻挡文本框的 jQuery 解决方法 by FungLeo 前言 做好了项目之后,在各种浏览器里面测试,都没有问题.很高兴,交付后端使用.然而发现在微信自带浏览器里面,却是出现了 ...
- 阅读软件打不开HTML,教你win7浏览器打不开本地html文件格式的解决方法
最近有用户反馈,遇到了html文件打不开,一直显示主页而不是html页面,其实很大部分是浏览器设置问题.有什么办法可以解决?针对此疑问,下面小编教你win7浏览器打不开本地html文件格式的解决方法. ...
最新文章
- 【Python】图解Pandas数据合并:concat、join、append
- 从文本分类来看图卷积神经网络
- 百度Create2021:百度地图日均位置服务请求次数突破1300亿
- 浅析Block的内部结构 , 及分析其是如何利用 NSInvocation 进行调用
- 函数式编程(Functional Programming)
- 数字条纹投影系统中基于概率分布函数的灵活伽玛计算算法
- 单应性变换 Homography Estimation
- 常用向量相似度衡量指标
- 微信小程序从前端wxml页面数据获取,到JS页面数据对象字符化,传递给后台,前台再从后台获取数据并在wxml页面动态展示数据(前后台交互实现发表动态功能)
- iOS 11 发布!巨大进步、里程碑式飞跃!
- Layui官网地址官网仓库
- 浙商银行入职计算机考试,浙商银行计算机笔试心得
- 基于java+SpringBoot+HTML+Mysql学生宿舍管理系统
- lower_bound,upper_bound的第四个参数
- 让人绝望的C语言恶搞小程序,网友:生无可恋!
- 用Python一键免登录下载某度文库各类PPT课件
- 新一代前端框架的探索与思考
- hdfs 目录设置配额 、查询配额使用情况 、清除配额
- CSS背景缩写、简写详细
- detectron2安装在win10并运行测试--呕心沥血教程
热门文章
- 域控如何查看计算机在线,查看域控制器上登录用户
- 十进制转二进制(简单)
- 华为荣耀8X刷鸿蒙系统固件包,华为荣耀8X刷机教程_华为荣耀8X三键强刷官方系统包...
- Spring Boot 2.x 入门前的准备-IntelliJ IDEA 开发工具的安装与使用
- 安装分子对接软件UCSF DOCK6
- 2013年主流小尺寸Android平板终极横评
- Material Design in Action — 哔哩哔哩动画 Android 客户端
- c语言中mul是什么函数,mul函数的具体用法
- 利用青龙面板给天翼云盘实现天翼云盘自动签到
- 【网络通信 -- 直播】FFMPEG 简介与常用命令总结