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. pl/sql 程序块里打印问题

    declare v_number NUMBER; v_number2 NUMBER; begin select count(*) into v_number from dual; DBMS_OUTPU ...

  2. Asteroids(二分图最大匹配模板题)

    Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 12323   Accepted: 6716 Description Bess ...

  3. （2015年郑州轻工业学院ACM校赛题） G 矩阵

    看这道题的时候就感觉用一点动归思想+暴力 就能过了. #include<stdio.h> #include<iostream> #include<stack> #i ...

  4. delphi 通过控件的handle取得控件

    例子代码如下: vartsg:TstringGrid;begintsg:=Tstringgrid(FindControl(handle));//正常使用TstringGrid//tsg......./ ...

  5. Android新浪微博客户端（五）——主界面的TabHost和WeiboUtil

    原文出自:方杰|http://fangjie.info/?p=183转载请注明出处 最终效果演示:http://fangjie.info/?page_id=54 该项目代码已经放到github:htt ...

  6. Flask+Mysql搭建网站之安装Mysql

    安装Mysql # sudo apt-get install mysql-server 安装过程需要输入root密码,这个密码是mysql 的root密码,之后连接mysql会用到,这个要记住. 安装 ...

  7. python爬虫__第一个爬虫程序

    前言 机缘巧合,最近在学习机器学习实战, 本来要用python来做实验和开发环境 得到一个需求,要爬取大众点评中的一些商户信息, 于是开启了我的第一个爬虫的编写,里面有好多心酸,主要是第一次. 我的文 ...

  8. PHP学习之［第03讲］PHP5.4 语法、常量、变量、数据类型详解

    1.<?php echo "Hello World"; ?> 2.//注释1,#注释2,/* 注释3 */ 3.系统常量: __FILE__默认常量,是指PHP程序文件 ...

  9. Django学习笔记（五）—— 表单

    疯狂的暑假学习之  Django学习笔记(五)-- 表单 參考:<The Django Book> 第7章 1. HttpRequest对象的信息 request.path         ...

  10. Xamarin改写安卓Residemenu控件

    1.下载最新的Residemenu安卓代码.用intellig打开,重新编译一下. 2.需要将其中的Residemenu,用gradle编译生成*.aar文件格式. 2.1 下载gradle,配置环境 ...