浮动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/

转载于:https://www.cnblogs.com/silences/p/6178034.html

浮动div中的图片垂直居中相关推荐

[css] 怎么让div中的图片和文字同时上下居中？
[css] 怎么让div中的图片和文字同时上下居中? <div><img src="./"/><label>文字内容</label> ...
学习使用CSS实现div中的内容垂直居中的方法
学习使用CSS实现div中的内容垂直居中的方法一.行高(line-height)法二.内边距(padding)法三.模拟表格法四.CSS3的transform来实现五:css3的box方法实 ...
如何将div中的内容垂直居中
如何将div中的内容垂直居中第一种方法: 在div里面添加:text-align:center; line-height: 60px; 这里的line-height是行高,这个根据你的div的高度要 ...
div中内容水平垂直居中
1. div高度自适应的情况 div在不设置高度的时候,会被里面的内容撑开,内容自动填充在div中,无论是一行内容还是多行内容,此时不需要设置垂直居中,内容自动在中间的, 想要看的更直观些,只需要加上 ...
div中内容文字垂直居中、文字不换行显示省略号
目录 div中文字垂直居中 2.文字不换行,文本溢出显示省略标志 div中文字垂直居中 1.行高法文字的行高和容器的高度相同, p { height:30px; line-height:30px; ...
html怎么让div中的文字垂直居中,如何让DIV中的文字垂直居中？
在写页面时经常会碰到文字在div中要居中的情况.水平居中很容易,text-align:center就能实现:但垂直居中很少用到,要么就是直接给margin,但现在讲解一下不用margin如何实现垂直居 ...
div中让文字垂直居中
问题引入在div中如何让文字垂直居中? 作者在刚接触web前端开发时就遇到了这个问题,一直没有记录下来,今天正好有空,便记录下来. 情景再现为了方便展示,我把style先直接写在了div里. &l ...
div里面的图片垂直居中的方法
body结构 <body> <div> <img src="1.jpg" alt="haha"> ...
CSS总结div中的内容垂直居中的五种方法
一.行高(line-height)法如果要垂直居中的只有一行或几个文字,那它的制作最为简单,只要让文字的行高和容器的高度相同即可,比如: p { height:30px; line-height:3 ...

浮动div中的图片垂直居中

浮动div中的图片垂直居中相关推荐

最新文章

热门文章