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. MappedByteBuffer高速缓存文件、RandomAccessFile随机访问

    说到高速缓存存储,处理读写文件,那就不得不说MappedByteBuffer. 看了好多文章以后写一下自己的总结. 在这里先介绍一下相关的类与方法. 先说一下Buffer.ByteBuffer.Map ...

  2. BZOJ 1003 [ZJOI2006]物流运输trans

    1003: [ZJOI2006]物流运输trans Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 4242  Solved: 1765[Submit] ...

  3. 【转】显示Ubuntu文件浏览器的地址栏--不错

    原文网址:http://www.blogbus.com/anythingok-logs/144447448.html Ubuntu默认使用nautilus作为其可视化的文件浏览器,其默认值不显示地址栏 ...

  4. 【转】Android 二维码 生成和识别（附Demo源码）--不错

    原文网址:http://www.cnblogs.com/mythou/p/3280023.html 今天讲一下目前移动领域很常用的技术——二维码.现在大街小巷.各大网站都有二维码的踪迹,不管是IOS. ...

  5. C# .NET开发Oracle数据库应用程序

    .NET Framework访问Oracle数据库至少有两种方式,一种是利用微软提供的ADO.NET,另一种是利用Oracle提供的ODP.NET. 安装VS的时候会附带ADO.NET,安装Oracl ...

  6. 【性能测试】【Jmeter】学习（1）

    2013/8/6开始阅读Jmeter文档 2013/8/7总结 监听器——CSV Data Set Config 在Jmeter中添加一个CSV配置原件 CSV配置原件添加方法:(右键点击某一个操作步 ...

  7. AOJ 0121 广度优先搜索

    题意:7数码问题.在2×4的棋盘上,摆有7个棋子,每个棋子上标有1至7的某一数字,不同棋子上标的数字不相同.棋盘上还有一个空格(用0表示),与空格相邻(上下左右)的棋子可以移到空格中,该棋子原先位置成 ...

  8. MyBatis（3）：SQL映射

    前面学习了config.xml,下面就要进入MyBatis的核心SQL映射了,第一篇文章的时候,student.xml里面是这么写的: 1 2 3 4 5 6 7 8 9 10 11 <?xml ...

  9. [RxJS] Creation operator: create()

    We have been using Observable.create() a lot in previous lessons, so let's take a closer look how do ...

  10. root用户改动普通用户文件

    首先使用别的用户登录入LINUX系统,切换成root用户.进入到须要改动的用户主文件夹,对该用户文件夹下的文件进行改动