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

  1. <body onresize="myLoad()" onload="myLoad()">
  2. <div id="xuanma" style="Z-INDEX: 1; LEFT: 0px; POSITION: absolute; TOP: 0px"><img id="ximage" src="/jscss/demoimg/wall_s8.jpg"/></div>
  3. <SCRIPT language="javascript" type=text/javascript>
  4. function myLoad()
  5. {
  6. document.getElementById('xuanma').style.top= document.body.clientHeight/2-document.getElementById('ximage').height/2;
  7. document.getElementById('xuanma').style.left= document.body.clientWidth/2-document.getElementById('ximage').width/2;
  8. }
  9. </SCRIPT>
  10. </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. -_-#【React】

    React Native 用于构建用户界面的JAVASCRIPT库 | ReactReact 入门实例教程颠覆式前端UI开发框架:Reactzhihu1zhihu2 React.js编程思想 < ...

  2. 【动态规划】XMU 1030 苦恼的月下老人

    题目链接: http://acm.xmu.edu.cn/JudgeOnline/problem.php?id=1030 题目大意: 给定两个字符串的长度和内容,求最长公共子序列. 题目思路: [动态规 ...

  3. uglifyjs压缩js文件(指令压缩/ 批量压缩/ 编程方式压缩)

    一.指令压缩 1.安装node,npm——详细见nodejs安装与使用入门 2.安装 uglifyjs——npm install -g uglify-js 3.压缩例子:1)uglifyjs  mai ...

  4. Android SimpleAdapter GridView (网格图片点击放大显示)

    GridView网格视图 GridView网格视图是按照行,列分布的方式来显示多个组件,通常用于显示图片或是图标等,在使用网格视图时,首先需要要在屏幕上添加GridView组件. 常用属性: 1. a ...

  5. mongodb的write concern

    mongodb有一个write concern的设置,作用是保障write operation的可靠性.一般是在client driver里设置的,和db.getLastError()方法关系很大 一 ...

  6. duilib DirectUI库里面的一个简单的例子RichListDemo

    1.首先来看这里的CRichListWnd 已经不再是从CWindowWnd继承了 classCRichListWnd:publicWindowImplBase 从WindowImplBase中,可以 ...

  7. android开发步步为营之68:Facebook原生广告接入总结

    开发应用的目的是干嘛?一方面当然是提供优质服务给用户,还有一方面最重要的还是须要有盈利.不然谁还有动力花钱花时间去开发app? 我们的应用主攻海外市场,所以主要还是接入国外的广告提供商.本文就今天刚完 ...

  8. 开源消息中间件DotNetMQ

    由于这个开源项目对我这种中间件菜鸟很有帮助,因此,我将官方的说明文档翻译如下: Introduction In this article, I will introduce a new and ind ...

  9. 基础-ADO插入数据后返回自增ID @@IDENTITY

    在文件上传中,没上传一个文件都会插入一条数据信息,那么就要返回插入的数据的id,以便进行真实删除操作.以下是ADO操作数据库的返回方法: string sql = string.Format(@&qu ...

  10. OD: DEP & Ret2Libc

    Data Execution Prevention,数据执行保护,专门用来弥补计算机对数据和代码混淆这一天然缺陷. DEP 的原理是将数据所在的内存页(默认的堆.各种堆栈页.内存池页)标记为不可执行, ...