浮动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%; ...
随机推荐
- Java算法之字符串反转分析
本文来自http://blog.csdn.net/liuxian13183/ ,引用必须注明出处! 在基本的工作内容开发中,算法不会显得那么重要,而在百万级别的时候,差距非常大,今天带大家研究下常见的 ...
- 转摘 MySQL扫盲篇
一下文章摘自:http://www.jellythink.com/archives/636 MySQL扫盲篇 2014-09-15 分类:MySQL / 数据库 阅读(1412) 评论(1) 为什么 ...
- 数据库连接池：Druid
转自: http://www.cnblogs.com/windlaughing/p/3287501.html Java连接数据库方法概述 java.sql提供了一些接口和类,用于支持数据库增删改查等相 ...
- ubuntu不能正常登录
在ubuntu登录界面,输入密码后,出现一个界面后一闪而过又返回登录界面.查看auth.log发现如下错误 May 15 15:42:19 tim-vm lightdm: pam_unix(light ...
- Spring之Ioc
Spring的特性 >> 轻量级(Lightweight)相较于EJB而言Spring是轻量级的容器,不依赖任何web容器 >> 容器(Container) Spring本身不 ...
- Android 基于Android的手机邮件收发（JavaMail）之三（邮件接收）
初次做这个程序的时候,是仿照着网上别人的程序做的.因为本人比较菜,是一个新手,以前的基础知识没有学好,所以尽管有了别人的代码但是还是不知道怎么在界面上显示出它的效果来,废话不多少,现在就贴出我的参考程 ...
- mysql 主从
1.首先 主库创建二进制数据访问账户(账户:repl 密码:repl@01) GRANT REPLICATION SLAVE, REPLICATION CLIENT ON *.* to repl@'% ...
- ARC 与非 ARC 之间那些的'祸害'
你是否也曾被 assign.retain.copy.release.autorelease.strong.__strong.weak.__weak.__unsafe__unretain.__autor ...
- WPF 动画效果
线性插值动画.关键帧动画.路径动画 1. (Visibility)闪烁三下,停下两秒,循环: XAML: <Grid> <Grid.ColumnDefinitions> < ...
- Git(分布式版本控制系统)在Windows下的使用-将代码托管到开源中国（oschina）
一.Git是什么? Git --- The stupid content tracker, 傻瓜内容跟踪器.Git是目前世界上最先进的分布式版本控制系统. 二.SVN与Git的最主要的区别? ...