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. require js 将config和入口函数分开写

    原文地址 https://github.com/jrburke/requirejs/issues/354 Area there any plans to standardize/recommend a ...

  2. 如何创建WIN服务

    sc create ServiceName binPath= "XXXX.exe" displayName= "中文xxxx"binpath和displayna ...

  3. python_Opencv_图像的基础操作

    目标 获取像素值并修改 获取图像的属性(信息) 图像的ROI() 图像通道的拆分及合并 为图像扩充边缘 几乎所有以上的操作,与Numpy 的关系都比与OpenCV 的关系更加紧密,因此熟练Numpy ...

  4. wxPython学习笔记(初识)

    今天正式开始学习wxPython,基于对类的不熟悉,理解有点生硬,但还是做了些笔记. 1.是什么组成了一个wxpython程序? 一个wxpython程序必须有一个application(wx.App ...

  5. 在终端(Terminal)里用命令行进行数学运算

    有时候我们进行一些数学运算,我们会去开系统自带的计算来做这件事情,其实我们也可以直接在终端里面用命令行进行的. 在命令行里敲 bc 进入数学计算模式,然后随便输入数学表达式 回车 ,结果就出来了,是不 ...

  6. Android布局属性详解剖析

    View的布局显示方式有下面几种: 线性布局(LinearLayout) 相对布局(RelativeLayout) 表格布局(TableLayout) 网格视图(GridView) 标签布局(TabL ...

  7. Android消息机制(1)

    在Android中,线程内部或者线程之间进行信息交互时经常会使用消息,这些基础的东西如果我们熟悉其内部的原理,将会使我们容易.更好地架构系统,避免一些低级的错误.在学习Android中消息机制之前,我 ...

  8. JS日期格式化函数性能优化篇

    最近开发的软件中需要用到日志功能,其中有一个重要功能是显示日期和时间.于是网上搜了一把,搜到大量的日期格式化函数,不过比较了下,感觉代码都不够优雅,而且性能都不给力.对线上一些代码进行了评测,以下是一 ...

  9. js截取字符串区分汉字字母代码

    js截取字符串并且区分汉字字母,一个汉字辨别为两个字节. function substr(str, len) { if (!str || !len) { return ''; } // 预期计数:中文 ...

  10. 【网络流#2】hdu 1533 - 最小费用最大流模板题

    最小费用最大流,即MCMF(Minimum Cost Maximum Flow)问题 嗯~第一次写费用流题... 这道就是费用流的模板题,找不到更裸的题了 建图:每个m(Man)作为源点,每个H(Ho ...