浮动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%; ...
随机推荐
- HTTP参数中Etag的重要性
在研究tornado时,有个Etag比较好奇,从网上查询摘录如下:
- idea使用心得(3)-重构初探
上一篇idea心得中,介绍了快捷键的用法.其中提及了重构神器Alt+Ctrl+Shift+T , 当时只是稍稍提及,本文重点在idea提供的重构选项.后续会有<重构,改善既有代码的设计>的 ...
- html5 app开发,你知道多少？
随着大量新生移动设备的兴起,改变了互联网的未来,html5技术为开发者提供了一个跨平台的移动app开发方案,并且该方案具有很好的扩展性和灵活性,但就国内使用html5开发app应用技术来讲,还是有欠缺 ...
- Swift: 比较Swift中闭包传值、OC中的Block传值
一.介绍 开发者对匿名函数应该很清楚,其实它就是一个没有名字的函数或者方法,给人直观的感觉就是只能看到参数和返回值.在iOS开发中中,它又有自己的称呼,在OC中叫Block代码块,在Swift中叫闭包 ...
- jquery选择器和基本语句
$("#aa"); //根据ID找 $(".aa"); //根据class找 $("div"); //根据标签名找 $("[id= ...
- 设置更新源和下载ferret
kali无法定位软件包 解决: deb http://http.kali.org/kali kali-rolling main non-free contrib kali可用的官方更新源(cd /et ...
- [总结] I/O输入，输出
I/O输入,输出第一:先判断到底是输入还是输出,站在程序的立场第二:判断是传递字节,还是字符,决定管道粗细,字节流是最基本的数据输出管道.字符类型管道专门用来传送文本数据.Java流的四大父类:1.字 ...
- CAS学习笔记（一）
近期做单点登录,看了一些CAS资料,做下总结 一.cas简介 全名:Central Authentication Service 特点: 1.开源的.多协议的 SSO 解决方案: Protocols ...
- Android 主题切换 小结
前言 我们用手机的时候经常看到 设置里面有夜间模式和白天模式来更换APP的主题,以前以为很简单,但是实际做起来还是有各种不完美,那么我们也要去了解各种解决方案来丰富我们的知识,现在我们就来看看各种优劣 ...
- SQLServer针对排名函数ROWNUMBER()、RANK()、DENSE_RANK()、NTILE的研究！~
相信大家在软件工程中经常会遇到对某些数据进行排名的问题,尤其是对于电子商务的HR来说“大手笔”是非常具有潜在价值的!~至于都有哪些价值这个超出本文的范畴不予进行说明,但是不得不说的是每一个精明的HR以 ...