浮动div中的图片垂直居中
table-cell方法垂直水平居中
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="table-cell方法居中">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<style>
.upload_img {
position: relative;
width: 150px;
height: 150px;
border: 1px solid #ccc;
display: table-cell;
background: #eee;
vertical-align: middle;
}
.upload_img img {
border: none;
max-width: 100%;
max-height: 100%;
display: block;
margin: auto;
}
</style> <body>
<div id="imgdiv3" class="upload_img">
<img src="http://images2015.cnblogs.com/blog/653009/201603/653009-20160310103258132-1841991840.jpg" id="imgShow3" >
</div>
</body>
</html>
当div浮动的时候就无法使用上面的方法进行垂直居中了，接下来就用到line-height进行居中了
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="[add your bin description]">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<style>
.upload-img {
float:right;
width: 200px;
height: 200px;
background-color: #ccc;
line-height: 200px;
vertical-align: middle;
text-align: center
}
img{
vertical-align: middle;max-width:100%;max-height:100%;
}
</style>
<body>
<div>
<div class="upload-img">
<img src="http://images2015.cnblogs.com/blog/653009/201603/653009-20160310103258132-1841991840.jpg">
</div>
</div> </body>
</html>
有个问题值得注意，编写代码的时候没有添加
<!doctype html>
造成了没有办法垂直居中!
代码演示：https://jsfiddle.net/silence19/djmznmpa/
浮动div中的图片垂直居中的更多相关文章
- [转]如何让div中的内容垂直居中
转自:http://blog.163.com/yan_1990/blog/static/197805107201211311515454/ 虽然Div布局已经基本上取代了表格布局,但表格布局和Div布 ...
- 如何让div中的内容垂直居中
虽然Div布局已经基本上取代了表格布局,但表格布局和Div布局仍然各有千秋,互有长处.比如表格布局中的垂直居中就是Div布局的一大弱项,不过好在千变万化的CSS可以灵活运用,可以制作出准垂直居中效果, ...
- 文字在div中水平和垂直居中的的css样式
文字在div中水平和垂直居中的的css样式 text-align:center; /*水平居中*/ line-height: 20px; /*行距设为与div高度一致*/ 示例如下: HTML元素 & ...
- div中的img垂直居中的方法，最简单！ 偷学来的，，，不要说我抄袭啊(*^__^*)
让div中的img垂直居中,水平居中很简单,用text-align:center; 让div中img垂直居中的方法其实也很简单 重点是: display:table-cell; 让标签具有表格的属 ...
- div中的图片跑出来
一:div中的图片跑出来 <style> /* 图片在一行 */ #div1 li{ float: left; list-style: none; } </style> < ...
- div中让文字垂直居中
在div中如何让文字垂直居中? 作者在刚接触web前端开发时就遇到了这个问题,一直没有记录下来,今天正好有空,便记录下来. 为了方便展示,我把style先直接写在了div里. 效果如下图所示: 图1. ...
- div中粘贴图片并上传服务器 div中拖拽图片文件并上传服务器
应用简介:此文主要是描述如何在前端div中直接ctrl+v 粘贴图片,并上传到服务器,包括拖拽图片文件到div中 应用场景描述:用QQ或者其它切图软件截图,在指定的div中ctrl+v 粘贴并显示,点 ...
- 怎样在div中添加图片或设置颜色
1.插入图片<div><img src="图片地址" /></div>2.图片做背景<div style="background ...
- 如何让div中的span垂直居中 ----height:100%设置div的高度
如果div中只有一个span一个元素,可以使用line-height.如果div中还有其他元素,可以设置span的css如下: .span{ position: absolute; top: 50%; ...
随机推荐
- JMeter学习-037-JMeter调试工具之四-BeanShell+jmeter.log
前面三篇文章分别讲述了 HTTP Mirror Server . Debug PostProcessor 和 Debug Samper 的脚本调试实例.此文主要讲述第四种调试方法,通过 BeanShe ...
- "mkimage" command not found - U-Boot images will not be built
编译内核的时候出现错误:"mkimage" command not found - U-Boot images will not be built 参考链接 http://blog ...
- RPM包管理命令rpm
RPM包管理器是Linux系统中最早的软件包管理软件之一,也是目前最流行的软件包管理器,许多发行版都使用RPM作为默认的软件包管理软件. RPM软件包名称格式: samba-client-3.0.33 ...
- 使用MaskFilter
使用MaskFilter MaskFilter类可以为Paint分配边缘效果. 对MaskFilter的扩展可以对一个Paint边缘的alpha通道应用转换.Android包含了下面几种MaskFil ...
- python gevent 协程
简介 没有切换开销.因为子程序切换不是线程切换,而是由程序自身控制,没有线程切换的开销,因此执行效率高, 不需要锁机制.因为只有一个线程,也不存在同时写变量冲突,在协程中控制共享资源不加锁,只需要判断 ...
- Python之路----------random模块
随机数模块: import random #随机小数 print(random.random()) #随机整数 print(random.randint(1,5))#他会打印5 #随机整数 print ...
- Selenium 功能总结大集合
slenium自动化测试的一个利器: 总结了部分功能,成图,方便学习: 这是一张大图,大家看起来可能比较麻烦: 可以在我的github下载:selenium大图.xmind格式
- 如何从投票的网站的管理后台导出已投票的邀请码数据至Excel,并且稍修改,再导入到现场抽奖软件中?
第一步:进入投票网站的管理后台,导出 已投票 的 邀请码 相关信息至Excel中,下图所示: 并且 删除第一行表头汉字信息. 第二步:把第A列 数值 信息 转换 为 文本 信息(注:转换方法详细点击此 ...
- AIX UNIX 系统管理、维护与高可用集群建设——数据库结构设计
在对数据库类应用进行优化的过程中我们了解到一个原则,即思想上要从结构设计抓起,按照下面的顺序: 1.数据库逻辑结构设计和物理设计. 2.数据库对象部署和SQL代码编写. 3.数据库实例性能调整和优化. ...
- 镁光c400-MTFDDAK064M固态硬盘更新固件
前段时间笔记本不停地假死机,就是那种系统停止响应,但鼠标依然有动作的死机,各种烦人,后来检测了下系统的温度,发现cpu轻易地上了75度,甚至会到94度,以为风扇该清理了,硅胶该换了,回想了一下,离上次 ...