img标签在div里上下居中
方法一:图片尺寸未知,IE8-不支持
CSS部分:
<style>
.content{
width:500px;
height:500px;
border:1px solid black;
position:relative;
}
</style> DOM部分:
<div class="content">
<img src="http://static.cnblogs.com/images/adminlogo.gif" style="margin-top:auto;margin-bottom:auto;top:0;bottom:0;position:absolute"/>
</div>
方法二:图片尺寸已知,正负margin抵消
CSS部分:
<style>
.content{
width:500px;
height:500px;
border:1px solid black;
position:relative;
}
</style> DOM结构:
<div class="content">
<img src="http://static.cnblogs.com/images/adminlogo.gif" height=164 style="margin-top:-82px;top:50%;position:absolute"/>//margin-top:-imgheight/2
</div>
方法三:图片尺寸未知,table-cell属性,IE8-不支持
CSS部分
<style>
.content{
width:500px;
height:500px;
border:1px solid black;
display:table-cell;
vertical-align:middle
}
</style> DOM部分
<div class="content">
<img src="http://static.cnblogs.com/images/adminlogo.gif"/>
</div>
方法四:图片大小未知,背景图片
CSS部分
<style>
.content{
width:500px;
height:500px;
border:1px solid black;
background:url('http://static.cnblogs.com/images/adminlogo.gif') center no-repeat;
}
</style> DOM部分
<div class="content">
</div>
方法五:利用IFC,创建一个IFC的环境,让行框的高度是包含块的高度的100%,让行框内部的元素使用vertical-align:middle,就可以实现垂直居中。因此,我们可以在行框中插入一个高度100%的inline-block元素,把整个行框撑高直到包含块的100%。见http://www.cnblogs.com/aaron-shu/p/4101198.html
img标签在div里上下居中的更多相关文章
- 如何让图片在div里左右居中,上下居中
如何让图片在div里左右居中,上下居中 转载▼ 1.要想让图片左右对齐,我们可以在div里写入"style:text-align:center;"代码来实现. 2.要想使图片居 ...
- [转]div里table居中的问题 Div与body顶部间隙
本文转自:http://www.cnblogs.com/jinhui/archive/2008/09/24/1297729.html 将div的text-align设为center,然后将table的 ...
- 实现图标Icon+文字在div里自动中心居中(水平垂直居中)
已知div行高设置text-align:center文字会自动居中. 通过:before来设置icon的地址和高宽. 需要设置图片默认的垂直居中条件,与文字一致,为text-bottom. 设置图片行 ...
- 总结:如何获取同一个DIV里的多个不同子标签的值,并赋值给input?
这个问题说起来简单,但对于新手来说,也着实卡了好久,并且我在网上搜了好久没能找到合适的答案, 于是去博问问了一下,得到许多大神们的帮助与回答,接下来我就总结一下能够实现这个效果的几种方法,既为了自己更 ...
- css参考文档; 官方英文说明!! 1 margin padding 百分比参照物 2 margin值为auto时的说明 3 div在div里垂直居中方法 4 dispaly:flex说明
css参考文档 http://css.doyoe.com/ 两篇很好的文章:(下面的css官方英文说明链接 有时间可以研究下 http://www.w3.org/TR/css3-box/ ...
- <div>里用display:block有用么?
对所有的块元素都没有意义,块元素的dispaly属性默认值为block,没必要再显式定义--除非你之前对块元素的display属性重新定义过. =========================== ...
- div设置了居中和宽度,但是显示时宽度占100%
<div id="bigDiv" align="center"> <div id="bottom" style=" ...
- CSS实现DIV水平自适应居中
DIV水平自适应居中 <!DOCTYPE html> <html lang="cn"> <head> <meta charset=&quo ...
- jQuery加载一个html页面到指定的div里
一.jQuery加载一个html页面到指定的div里 把a.html里面的某一部份的内容加载到b.html的一个div里.比如:加载a.html里面的<div id=“row"> ...
随机推荐
- OpenStack存储(单节点)
一.OpenStack Swift对象存储 1.安装Swift服务 在controller节点依次执行iaas-install-swift-controller.sh和iaas-install-swi ...
- [UE4]GameMode和GameInstance
1.GameMode与场景的生命周期是相同的.使用OpenLevel切换到另外一个场景,第一个场景的GameMode就会被销毁,然后场景第二个场景的GameMode 2.GameInstance与进程 ...
- orcale 函数wm_concat不存咋lob值使用zh_concat 替换
create or replace TYPE zh_concat_im AUTHID CURRENT_USER AS OBJECT ( CURR_STR VARCHAR2(32767), STATIC ...
- JVM调优常用参数
JVM常用参数配置 -Xmx2048m 最大堆大小 -Xms1024m 初始堆大小 -Xmn1024m 年轻代大小 -XX:SurvivorRatio=8 Eden区与Survivor区的大小比值,设 ...
- 迭代器&可迭代对象
迭代器 能够被next调用, 并不断返回值的一个对象惰性排序, 一次只获取一个数据, (占用一个空间)迭代器可以遍历无限量的数据 特点: 1.惰性序列, 节省内存 2.遍历使用next, 方向不可逆 ...
- _mysql.c(42) : fatal error C1083: Cannot open include file: 'config-win.h':问题的解决
在win7下安装了python后,想安装python-mysql,使用pip安装出现如下问题: >pip install MySQL-python _mysql.c(42) : fatal er ...
- CNN卷积层基础:特征提取+卷积核+反向传播
本篇介绍卷积层的线性部分 一.与全连接层相比卷积层有什么优势? 卷积层可以节省参数,因为卷积运算利用了图像的局部相关性——分析出一小片区域的特点,加上Pooling层(汇集.汇聚),从附近的卷积结果中 ...
- 对mysql事务提交、回滚的错误理解
一.起因 begin或者START TRANSACTION开始一个事务 rollback事务回滚 commit 事务确认 人们对事务的解释如下:事务由作为一个单独单元的一个或多个SQL语句组成,如果其 ...
- Page Cache, the Affair Between Memory and Files.页面缓存-内存与文件的那些事
原文标题:Page Cache, the Affair Between Memory and Files 原文地址:http://duartes.org/gustavo/blog/ [注:本人水平有限 ...
- solr 打分和排序机制(转载)
以下来自solr in action. 包含: 词项频次.查询词项出现在当前查询文档中的次数. 反向文档频次.查询词项出现在所有文档总的次数. 此项权重. 标准化因子: 字段规范: 文档权重. 字段权 ...