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中垂直居中的更多相关文章

  1. 尺寸不固定的图片在div中垂直居中并完全显示

    前几天做一个项目,需要批量上传图片,图片外侧div尺寸固定:由于图片是用户输入的,所以大小存在不确定性,产品需求是无论图片尺寸多大,都要垂直居中完全显示 废话不多说,直接上代码 html <ul ...

  2. CSS-布局【1】-图片在div中垂直居中

    方法一:通过增加100%高度行内块居中对齐 <!DOCTYPE html> <html> <head> <meta name="viewport&q ...

  3. 单个未知大小图片在div里面垂直居中的方法。。。添加辅助元素挤一下位置达到居中

    单个未知大小图片在div里面垂直居中的方法...添加辅助元素挤一下位置达到居中   <div class="ServicesLiTopPic"> <i>&l ...

  4. 设置span在div中垂直居中

    转自:https://blog.csdn.net/weirenkuan/article/details/51177695 使用display:table-cell,span中内容无论多少,都可以垂直居 ...

  5. 未知行数的文字在div中垂直居中

    今天工作中遇到一个问题,就是未知行数的文字在div中怎么垂直居中,如下面的3个图: 图1 图2 图3 图1是2行文字的效果,图2是不经过css垂直居中处理的效果,图3是经过css垂直居中后的效果,ht ...

  6. 随机图片大小在DIV中垂直居中对齐总结

    老遇到这种样式 现在总结一下 <!DOCTYPE> <html> <head> <meta http-equiv="Content-Type&quo ...

  7. 让图片在div 中居中的方法

    方法一: 思路:利用text-align属性将图片水平居中,然后设置padding-top的值使其垂直居中. 结构如下: <div> <img src="images/tt ...

  8. 未知高度的图片在div设置垂直居中

    方法一: 该方法是将外部容器的显示模式设置成display:table,img标签外部再嵌套一个span标签,并设置span的显示模式为display:table-cell,这样就可以很方便的使用ve ...

  9. 不定宽高的文字在div中垂直居中

    本人在面试的时候被问到:如何使一段不定宽高的文字垂直居中呢? 现在来总结一下: 在body中写入结构 <div id="main">    <div id=&qu ...

随机推荐

  1. struts2文件下载出现Can not find a java.io.InputStream with the name的错误

    今天在用struts2就行文件下载时出现如下错误: Servlet.service() for servlet default threw exception java.lang.IllegalArg ...

  2. [转贴]JAVA:RESTLET开发实例(二)使用Component、Application的REST服务

    上一篇文章,我们介绍了基于JAX-RS的REST服务,本篇文章我们介绍不基于JAX-RS的模式.JAX-RS其实就是一个简单的 Application服务.和我们接下来介绍的Application基本 ...

  3. 更好的 SQL 模式的 10 条规则

    更好的 SQL 模式的 10 条规则 2015-06-17 11:57:392353浏览1评论 在创建新表和数据仓库时,要做很多决定.一些在当时似乎无关紧要的地方,却让你和用户在数据库的生命期内感到痛 ...

  4. 【HDOJ】3416 Marriage Match IV

    先求SPSS.然后遍历每条边,检查是否为最短路径的边,如果是(dis[v]==dis[u]+w)则加入到网络流中.最后Dinic最大流. /* 3416 */ #include <iostrea ...

  5. java基于xml配置的通用excel单表数据导入组件(三、负责数据转换处理的类)

    package xxxxxxx.manage.importexcel; import java.util.Map; import java.util.logging.Logger; import xx ...

  6. (转载)puremvc框架之proxy

    (转载)http://www.cnblogs.com/yjmyzz/archive/2010/08/01/1789769.html 上一篇 puremvc框架之Command 里,已经学习了如何利用C ...

  7. 整理:Google jQuery 引用地址大全和方法(转)

    什么是google的js托管? 说的明白点,跟我们以往做法一样,只不过这时候的引用的js库是放在google服务器上的. 比如引用jquery,则使用路径  http://ajax.googleapi ...

  8. 使用socket.io打造公共聊天室

    最近的计算机网络课上老师开始讲socket,tcp相关的知识,当时脑袋里就蹦出一个想法,那就是打造一个聊天室.实现方式也挺多的,常见的可以用C++或者Java进行socket编程来构建这么一个聊天室. ...

  9. bzoj 1069 [SCOI2007]最大土地面积(旋转卡壳)

    1069: [SCOI2007]最大土地面积 Time Limit: 1 Sec  Memory Limit: 162 MBSubmit: 2277  Solved: 853[Submit][Stat ...

  10. 洛谷P1407 工资

    洛谷P1407 工资 本题地址:http://www.luogu.org/problem/show?pid=1407 题目描述 有一家世界级大企业,他们经过调查,发现了一个奇特的现象,竟然在自己的公司 ...