浮动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%; ...
随机推荐
- app活动页面上的痛点
app项目上需要做一个小的活动,先看下页面布局 需求是这5个板块逐个展示,展示一块的时候,页面整体向上滚动一定的距离. 刚开始考虑的时候,是准备依赖css3属性的transition实现的,包括顺序延 ...
- Spring的JDBC框架
转自: http://www.cnblogs.com/windlaughing/p/3287750.html Spring JDBC提供了一套JDBC抽象框架,用于简化JDBC开发. Spring主要 ...
- css控制文字大小及颜色、字体
字体:font-style:italic:斜体 font-weight:bold:加粗 font-size:30px:大小 line-height:30 ...
- SVN更新时，校验和不匹配
svn检出时出现校验和不匹配. 解决方法: 1. 在另外地方检出,然后找到对应文件所在的.svn/entries文件,用新检出的entries文件覆盖原来发生错误的entries文件. 2. 如果是团 ...
- jsp页面常用控件
1.点击按钮返回 上一页: <input type="submit" value="返回" onclick="javascript :histo ...
- lua协程一则报错解决“attempt to yield across metamethod/C-call boundary”
问题 attempt to yield across metamethod/C-call boundary 需求跟如下帖子中描述一致: http://bbs.chinaunix.net/forum.p ...
- MOSS（Microsoft Office Sharepoint Server）升级2013遇到的PDF权限问题及解决方案
最近公司MOSS从2007升级到了2013,遇到了一个很呕心的问题: 为了保护公司资料安全,我们一直使用RMS给文档增加权限(信息权限管理 (IRM)),只有公司内部员工可以阅读.RMS加权限的范围仅 ...
- Linux:krb5
Kerberos协议主要用于计算机网络的身份鉴别(Authentication), 其特点是用户只需输入一次身份验证信息就可以凭借此验证获得的票据(ticket-granting ticket)访问多 ...
- TIJ——Chapter Five:Initialization & Cleanup
Method overloading |_Distinguishing overloaded methods If the methods hava the same name, how can Ja ...
- cms 常用标签
{template "content","header"} 调用根目录下phpcms\template\content\header文件 {CHARSET} 字 ...