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中的图片垂直居中的更多相关文章

  1. [转]如何让div中的内容垂直居中

    转自:http://blog.163.com/yan_1990/blog/static/197805107201211311515454/ 虽然Div布局已经基本上取代了表格布局,但表格布局和Div布 ...

  2. 如何让div中的内容垂直居中

    虽然Div布局已经基本上取代了表格布局,但表格布局和Div布局仍然各有千秋,互有长处.比如表格布局中的垂直居中就是Div布局的一大弱项,不过好在千变万化的CSS可以灵活运用,可以制作出准垂直居中效果, ...

  3. 文字在div中水平和垂直居中的的css样式

    文字在div中水平和垂直居中的的css样式 text-align:center; /*水平居中*/ line-height: 20px; /*行距设为与div高度一致*/ 示例如下: HTML元素 & ...

  4. div中的img垂直居中的方法，最简单！ 偷学来的，，，不要说我抄袭啊(*^__^*)

    让div中的img垂直居中,水平居中很简单,用text-align:center; 让div中img垂直居中的方法其实也很简单 重点是: display:table-cell;   让标签具有表格的属 ...

  5. div中的图片跑出来

    一:div中的图片跑出来 <style> /* 图片在一行 */ #div1 li{ float: left; list-style: none; } </style> < ...

  6. div中让文字垂直居中

    在div中如何让文字垂直居中? 作者在刚接触web前端开发时就遇到了这个问题,一直没有记录下来,今天正好有空,便记录下来. 为了方便展示,我把style先直接写在了div里. 效果如下图所示: 图1. ...

  7. div中粘贴图片并上传服务器 div中拖拽图片文件并上传服务器

    应用简介:此文主要是描述如何在前端div中直接ctrl+v 粘贴图片,并上传到服务器,包括拖拽图片文件到div中 应用场景描述:用QQ或者其它切图软件截图,在指定的div中ctrl+v 粘贴并显示,点 ...

  8. 怎样在div中添加图片或设置颜色

    1.插入图片<div><img src="图片地址" /></div>2.图片做背景<div style="background ...

  9. 如何让div中的span垂直居中 ----height:100%设置div的高度

    如果div中只有一个span一个元素,可以使用line-height.如果div中还有其他元素,可以设置span的css如下: .span{ position: absolute; top: 50%; ...

随机推荐

  1. Thymeleaf 与 Javascript

    在 javascript 代码中使用 Thymeleaf 模板引擎: <script th:inline="javascript"> $("#content& ...

  2. Java中Properties类知识的总结

    一.Properties类与配置文件 注意:是一个Map集合,该集合中的键值对都是字符串.该集合通常用于对键值对形式的配置文件进行操作. 配置文件:将软件中可变的部分数据可以定义到一个文件中,方便以后 ...

  3. WordPress多站点获取当前博客信息

    http://www.utubon.com/1495/wordpress-multisite-get-current-bolg-info global $current_blog; 它的返回结果是: ...

  4. 网络监测工具-iftop教程

    在类Unix系统中可以使用top查看系统资源.进程.内存占用等信息.查看网络状态可以使用netstat.nmap等工具.若要查看实时的网络流量,监控TCP/IP连接等,则可以使用iftop. 一.if ...

  5. Oracle之nclob类型

    此类型会严重影响查询效率,请少用: nclob字段在查询结果中显示为<NCLOB>,查看nclob类型的值方法有两种 a.可点开...查看具体数据 b.选择所有数据,右击复制到Excel, ...

  6. iOS - NSString去掉回车与换行符

    代码展示: 由于服务器返回的字符串有回车与/n自己设置的xib的label显示装不下了,所以初次下策也没通知服务端自己改一下吧. NSString *str = fault.fault_content ...

  7. commonJS 浏览器实现

    commonjs http://www.commonjs.org/ CommonJS JavaScript is a powerful object oriented language with so ...

  8. leetcode 204

    题目描述: Description: Count the number of prime numbers less than a non-negative number, n. 解法一: 遍历从1-n ...

  9. 记一次MVC4站点在IIS上部署的诡异问题

    最近朋友的公司遇到一个站点部署问题, 朋友从事服务器维护多年,说也是花了十多天仍为解决. 经多次尝试未果,仍报错如下: 我询问了相关情况,确认了该网站是VS2013开发的,版本为,NET Framew ...

  10. 侣行APP

    本次要做的是团队共同完成一个项目.由队长组织,全体队员一起讨论分析并完成一款APP的需求调研,分析等工作. 1.团队介绍 队长:杨晓帅 队员                               ...