浮动div中的图片垂直居中
2016-12-14 09:39
281 查看
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垂直居中
- 让文本或图片在div容器中垂直居中
- Div中图片垂直居中与文字对齐
- 关于DIV重叠定位和图片垂直居中问题的研究(兼容FF、IE6、7、8)
- Div+css 图片垂直居中
- div里面图片垂直居中的几个例子
- 让文本或图片在div容器中垂直居中
- DIV图片垂直居中
- 让图片在div里面垂直居中
- div中图片水平和垂直居中并自适应宽高
- div 图片垂直居中问题
- div中图片垂直居中
- DIV中图片image垂直居中
- div里面图片垂直居中的几个例子
- css实现图片在div中水平和垂直居中(但图片宽高要小于div宽高)
- DIV里的图片垂直居中
- Div图片垂直居中的方法
- css控制div中图片垂直居中
- DIV中图片垂直居中以及等比缩放