CSS脚本如下:
<style>
.img_center{
height:200px;
width:200px;
background-image:url("t4.jpg");
background-repeat:no-repeat;
background-position:center center;
}
</style>
css实现图片居中:
<div style="border:1px solid windowtext;height:200px;width:200px;">
<img src="s.gif" class="img_center"/>
</div>
这里主要思路是把img的高度和宽度都设置为和div的一致,然后将图片作为背景显示来达到图片居中的目的,不过还需要利用一个s.gif(1*1)这个图片,ext就有。
JS脚本如下:
<script type="text/javascript">
window.onload=function(){
var img = document.getElementById("c_img");
var div = document.getElementById("c_div");
var height = div.style.height;
var width = div.style.width;
img.style.marginTop = (parseInt(height,10) - img.offsetHeight) / 2 + "px";
img.style.marginLeft = (parseInt(width,10) - img.offsetWidth) / 2 + "px";
}
</script>
js实现图片居中:
<div id="c_div" style="border:1px solid windowtext;height:200px;width:200px;">
<img src="t4.jpg" id="c_img"/>
</div>
这样也可以实现图片居中,省去了s.gif这个图片,不过一定要浏览器打开脚本执行功能,不然的话,图片就只能蜗居在div的左上角了。
分享到:
相关推荐
在DIV中图片垂直/水平居中(最简单方法)
js+CSS实现弹出居中背景半透明div层的方法.docx
JS+CSS 控制Img在div中居中显示一部分
以前以为必须要JS才能控制图片上下居中的,现在才发现原来css也有这个本事 一半只有table,默认图片才会上下居中,现在只需要加几行css即可实现,高级。使用方法简单:图片外围包含两个容器即可,并设置图片宽度...
以前的想法是通过CSS+Div使div居中,但是现在的想法变了,通过JavaScript可以简单的使Div在页面上居中,随着网页大小的改变做出相应的改变。而且只要明白了居中的原理轻而易举的就可以实现了。 先看一下居中的原理吧...
第2部分 CSS+DIV美化和布局篇 第10章 理解CSS定位与div布局 10.1 div 标记与 span 标记 10.2 盒子模型 10.3 元素的定位 10.4 定位实例一:轻轻松松给图片签名 10.5 定位实例二:文字阴影...
精通CSS+DIV网页样式与布局 视频教材主要内容 迅雷下载地址: 目录 第1部分 CSS基础知识篇 第1章 CSS的初步体验 1.1 CSS的概念 1.1.1 标记的概念 1.1.2 传统HTML的缺点 1.1.3 CSS的引入 1.1.4...
DIV容器内设置 text-align:center 即可让图片居中,但是DIV内默认的图片是上对齐,不会上下居中,如果想要实现这样的效果,JS判断是比较麻烦的,因为DIV容器内的图片高度是不一定的,那么只有用table了,我想大多数...
第2部分 CSS+DIV美化和布局篇 第10章 理解CSS定位与div布局 10.1 div 标记与 span 标记 10.2 盒子模型 10.3 元素的定位 10.4 定位实例一:轻轻松松给图片签名 10.5 定位实例二:文字...
在布局的传统解决方案中,都是基于盒状模型,依赖display属性、position属性、float属性,这种方式比较传统,对于那些特殊布局来说非常不方便,比如,垂直居中就不容易实现。 尤其是现在移动设备如此多的今天,需要...
如何用CSS&jQuery的垂直和水平方向的固定的或流体的div居中。 演示地址:http://www.jq22.com/jquery-info141
它可以判断外部div以及内部div的宽度高度,从而实现上下左右居中的目的,兼容主要浏览器 使用方法简单: 1、确保head中引入jquery库以及本例的css样式 2、将代码部分拷贝到你需要的地方 3、在代码...
NULL 博文链接:https://fengshayage.iteye.com/blog/868360
兼容各浏览器JS+CSS水平和垂直无缝图片滚动效果代码 12.漂亮暖色调js+flash平滑过渡大屏图片切换的广告代码 13.实用国外JS内容选项卡DEMO下载 14.推荐通用文字图片JS不间断滚动封装类 代替Marquee 15.站长...
第2部分 CSS+DIV美化和布局篇 第10章 理解CSS定位与div布局 10.1 div 标记与 span 标记 10.2 盒子模型 10.3 元素的定位 10.4 定位实例一:轻轻松松给图片签名 10.5 定位实例二:文字阴影...
图片垂直居中的css+div代码的几种方法编写
10 三、实现结构与表现分离 11 第六节 div+css的兼容性问题 11 一、div的垂直居中问题 11 二、margin加倍的问题 11 三、浮动ie产生的双倍距离 11 四、IE与宽度和高度的问题 11 五、页面的最小宽度 12 六、DIV浮动IE...