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"> ...
随机推荐
- Redis 在线管理工具(phpRedisAdmin)介绍 两次git
phpRedisAdmin is a simple web interface to manage Redis databases. phpRedisAdmin 在 Redis clients 的列表 ...
- 基于 MBTiles 规范扩展的缓存文件格式说明
MBTiles 是由 MapBox 制定的一种将瓦片地图数据存储到SQLite数据库中并可快速使用,管理和分享的规范.该规范由MapBox制定,详见http://mapbox.com/mbtiles- ...
- github----awesome-typescript-projects
https://github.com/brookshi/awesome-typescript-projects
- java入门简介
1.java运行环境 下载的jdk中包含了java运行时的环境(JRE),JRE又包含了java虚拟机(JVM) 2.java运行过程 源文件(.java)由编译器编译为字节码(.class)文件,再 ...
- (转)先装VS后装IIS产生问题的解决办法
原文地址:http://www.cnblogs.com/mytechblog/articles/1897682.html 基于.net的web程序设计asp.net,我们就必须安装VS和IIS,但这二 ...
- hadoop机群 运行wordcount出现 Input path does not exist: hdfs://ns1/user/root/a.txt
机群搭建好,执行自带wordcount时出现: Input path does not exist: hdfs://ns1/user/root/a.txt 此错误. [root@slave1 hado ...
- 小米造最强超分辨率算法 | Fast, Accurate and Lightweight Super-Resolution with Neural Architecture Search
本篇是基于 NAS 的图像超分辨率的文章,知名学术性自媒体 Paperweekly 在该文公布后迅速跟进,发表分析称「属于目前很火的 AutoML / Neural Architecture Sear ...
- KVM总结-KVM性能优化之网络性能优化
前面已经介绍了KVM CPU优化(http://blog.csdn.net/dylloveyou/article/details/71169463).内存优化(http://blog.csdn.net ...
- [AH2017/HNOI2017]大佬(动态规划 搜索)
/* 神仙yyb 理解题意可以发现 能够对大佬造成的伤害只和你怼了多少天大佬有关, 而且显然天数越多越好 那么我们可以先通过预处理来找出我们最多能够怼多少天大佬 然后我们发现最后我们能怼的血量状态数是 ...
- 01-spark基础
1.定义 Spark是一个由scala语言编写的实时计算系统 Spark支持的API包括Scala.Python.Java .R 2.功能 Spark Core: 将分布式数据抽象为弹性分布式数据集( ...