让图片在DIV中垂直居中
window.onload=function(){
var img = document.getElementById("imgdiv");
var div = document.getElementById("div1");
var marginTop = div.offsetHeight - img.height;
img.style.marginTop = (marginTop/2) + "px";
}
让图片在DIV中垂直居中的更多相关文章
- 尺寸不固定的图片在div中垂直居中并完全显示
前几天做一个项目,需要批量上传图片,图片外侧div尺寸固定:由于图片是用户输入的,所以大小存在不确定性,产品需求是无论图片尺寸多大,都要垂直居中完全显示 废话不多说,直接上代码 html <ul ...
- CSS-布局【1】-图片在div中垂直居中
方法一:通过增加100%高度行内块居中对齐 <!DOCTYPE html> <html> <head> <meta name="viewport&q ...
- 单个未知大小图片在div里面垂直居中的方法。。。添加辅助元素挤一下位置达到居中
单个未知大小图片在div里面垂直居中的方法...添加辅助元素挤一下位置达到居中 <div class="ServicesLiTopPic"> <i>&l ...
- 设置span在div中垂直居中
转自:https://blog.csdn.net/weirenkuan/article/details/51177695 使用display:table-cell,span中内容无论多少,都可以垂直居 ...
- 未知行数的文字在div中垂直居中
今天工作中遇到一个问题,就是未知行数的文字在div中怎么垂直居中,如下面的3个图: 图1 图2 图3 图1是2行文字的效果,图2是不经过css垂直居中处理的效果,图3是经过css垂直居中后的效果,ht ...
- 随机图片大小在DIV中垂直居中对齐总结
老遇到这种样式 现在总结一下 <!DOCTYPE> <html> <head> <meta http-equiv="Content-Type&quo ...
- 让图片在div 中居中的方法
方法一: 思路:利用text-align属性将图片水平居中,然后设置padding-top的值使其垂直居中. 结构如下: <div> <img src="images/tt ...
- 未知高度的图片在div设置垂直居中
方法一: 该方法是将外部容器的显示模式设置成display:table,img标签外部再嵌套一个span标签,并设置span的显示模式为display:table-cell,这样就可以很方便的使用ve ...
- 不定宽高的文字在div中垂直居中
本人在面试的时候被问到:如何使一段不定宽高的文字垂直居中呢? 现在来总结一下: 在body中写入结构 <div id="main"> <div id=&qu ...
随机推荐
- 详解如何用AD 生成Gerber文件
以上gerber文件就出完了; 下面步骤是:进行导出" 钻孔文件 ". 以上钻孔文件就出完了; 到此就全部完成输出了. 下面的操作,也可以不用导的 .下面步骤是:进行导出&qu ...
- Android中的Parcel机制 实现Bundle传递对象
Android中的Parcel机制 实现了Bundle传递对象 使用Bundle传递对象,首先要将其序列化,但是,在Android中要使用这种传递对象的方式需要用到Android Parc ...
- laravel 框架学习资料
demo:http://forumsarchive.laravel.io/viewtopic.php?id=3536 使用Laravel和Angular创建一个单页的评论应用 http://devel ...
- jni.h头文件详解一
1.jni.h头文件路径: /usr/lib/jvm/jdk_1.6.0_43/include/jni.h 2.jni.h头文件组成分析图: 3.下面通过上图进行分析讲解jni.h头文件. 一. jn ...
- FindBugs
FindBugs是一个能静态分析源代码中可能会出现Bug的Eclipse插件工具. 可以从http://sourceforge.net/project/showfiles.php?group_id=9 ...
- bzoj2242
快速幂 扩展欧几里得 baby-step-giant-step 可以自行baidu 程序附部分注释 ; type link=^node; node=record re,wh:l ...
- 【转】为ListView每个Item上面的按钮添加事件
原文网址:http://blog.csdn.net/qq435757399/article/details/8256453 1.先看下效果图: 在这里仅供测试,我把数据都写死了,根据需要 ...
- (转载)SQL联合查询中的关键语法
(转载)http://www.cnblogs.com/zhangliyu/archive/2009/03/21/1418215.html 联合查询效率较高.以下例子来说明联合查询的好处 t1表结构(用 ...
- HDU-2711 Lost Cows
Lost Cows Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total ...
- [转]NHibernate之旅(5):探索Insert, Update, Delete操作
本节内容 操作数据概述 1.新建对象 2.删除对象 3.更新对象 4.保存更新对象 结语 操作数据概述 我们常常所说的一个工作单元,通常是执行1个或多个操作,对这些操作要么提交要么放弃/回滚.想想使用 ...