CSS图上居中很好实现，但万恶的浏览器之间各不相让，搞的不兼容，还好我们有让其兼容的办法，那就是结合JS来实现，这样各个浏览器都听话多了。本例就是CSS结合JavaScript实现的图片垂直、水平方向都居中，也不是上下左右居中，位于网页的正中央，代码如下：

<body onresize="myLoad()" onload="myLoad()">

<div id="xuanma" style="Z-INDEX: 1; LEFT: 0px; POSITION: absolute; TOP: 0px"><img id="ximage" src="/jscss/demoimg/wall_s8.jpg"/></div>

<SCRIPT language="javascript" type=text/javascript>

function myLoad()

{

document.getElementById('xuanma').style.top= document.body.clientHeight/2-document.getElementById('ximage').height/2;

document.getElementById('xuanma').style.left= document.body.clientWidth/2-document.getElementById('ximage').width/2;

}

</SCRIPT>

</body>

复制代码保存成HTML页面，双击打开可测试效果。

Js配合CSS实现的图片居中的更多相关文章

  1. 如何使用css来让图片居中不变形 微信小程序和web端适用

    图片变形很多人祭奠出了妖魔鬼怪般的各种大法,比如使用jq来写,或者使用css表达式来写.今天我总结的是使用css3来写,唯一最大缺点就是对一些浏览器版本不够兼容.下面就是关于如何使用css来让图片居中 ...

  2. css使Img图片居中显示

    <div class="flex-center listing-img"> <img v-if="item.imgUrl" v-bind:sr ...

  3. 用CSS让网页背景图片居中的方法

    网页背景居中的方法有很多种的.这里介绍一些用CSS让背景图片居中的方法. 让背景图片居中的第一个方法是用像素设定,很多都用这种,但是也是最麻烦的: <div style="width: ...

  4. !!!css如何让img图片居中？css的display属性实现图片居中（代码实例）

    在我们开发前端页面的时候,为了让页面效果美观,会让图片呈现居中效果.那么css怎么让img图片居中显示呢?本篇文章给大家带来css如何让img图片居中?css的display属性实现图片居中(代码实例 ...

  5. Ajax清除浏览器js、css、图片缓存的方法

    做东东时都是把图片在服务器的地址存放在数据库里面,然后到浏览器中显示,但是后来发现了两个问题. 第一:为了安全起见,js是无法读取本地的图片的,不然你写一个js,岂不是可以获取任何人电脑里面的文件了. ...

  6. CSS设置图片居中的方法

    如果是应用了表格,那么设置单元格为align="center"就可以使其中的一切内容居中.如果没有应用表格要想设置图片居中就有点困难了.困难来自不按"常规出牌" ...

  7. css文字居中、图片居中、div居中解决方案

    一.文字居中 若文字只有一行 <!--html代码--> <div class="box"> <p class="text"> ...

  8. nginx js、css、图片 及 一些静态文件中出现 http://upstreamname:port 导致部分网页样式显示不正常

    nginx js.css.图片 及 一些静态文件中出现 http://upstreamname:port 导致部分网页样式显示不正常 http://upstreamname:port/....../. ...

  9. 关于 Cookie-free Domains (为什么将静态图片，js，css存放到单独的域名？)

    这篇文章对高性能web开发具有参考性:http://developer.yahoo.com/performance/rules.html 本文主要描述使用裸域名做网站主域名时,如何用子域名做 cook ...

随机推荐

  1. 国内大学毕业论文LaTeX模板集合

    国内大学毕业论文LaTeX模板集合 薛瑞尼的清华大学学位论文LaTeX模板http://sourceforge.net/projects/thuthesis/ 北大论文文档 LaTeX 模板 pkut ...

  2. POJ1088 滑雪（记忆化搜索）

    题目链接. 分析: 状态转移方程 d[i][j] = max(d[i-1][j], d[i+1][j], d[i][j-1], d[i][j+1]). #include <iostream> ...

  3. //string scriptstrs = "<script>alert('欢迎光临！');</script>";

    //string scriptstrs = "<script>alert('欢迎光临!');</script>"; //if (!Page.ClientSc ...

  4. POJ 1700 坐船过河问题

    题目链接:http://acm.hust.edu.cn/vjudge/contest/view.action?cid=82974#problem/E 解题思路:当n>=4,假设n个人单独过河所需 ...

  5. Win8 系统下串口出现叹号 异常（10）

    在网上找了些资料,自己试了一下可行,具体步骤就是把win8系统自动更新驱动的功能给关掉,然后自己下载可用的驱动.具体可以看 http://download.csdn.net/detail/wuu_ex ...

  6. 查看XBox360的系统版本信息

    XBox360的系统版本信息在系统设置界面就能看到: Step1:按手柄中央的"西瓜键",进入系统设置界面 Step2:在系统设置界面选择"主机设定" Step ...

  7. C#中用PadLeft、PadRight 补足位数

    在 C# 中可以对字符串使用 PadLeft 和 PadRight 进行轻松地补位. PadLeft(int totalWidth, char paddingChar) //在字符串左边用 paddi ...

  8. Check the quota usage

    stack@ubuntu1:~/Downloads$ nova absolute-limits +--------------------+------+-------+ | Name | Used ...

  9. JSP元素和标签

    1.JSP 的运行原理  当服务器上的一个JSP 页面被第一次请求执行时,服务器上的JSP引擎首先将JSP 页面文件转译成一个java 文件,再将这个java 文件 编译生成字节码文件,然后通过执行字 ...

  10. iOS8新特性之基于地理位置的消息通知UILocalNotification

              苹果在WWDC2014上正式公布了全新的iOS8操作系统. 界面上iOS8与iOS7相比变化不大,只是在功能方面进行了完好.                             ...