div中图片垂直居中

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8">

     <title></title>

     <style>

     .box {

         width: 200px;

         height:200px;

         display: table-cell;

         /* 水平居中 */

         text-align:center;

          /* 垂直居中 */

         vertical-align:middle;

         border: 1px solid #f40;

     }

     </style>

 </head>

 <body>

     <div class="box">

     <img src="111.png"/>

     </div>

 </body>

 </html>

显示结果:

div+css:div中图片垂直居中的更多相关文章

  1. CSS实现图片在div a标签中水平垂直居中

    CSS实现图片在div a标签中水平垂直居中 <div class="demo"> <a href="#"> <img src=& ...

  2. DIV CSS布局中绝对定位和浮动用法

    转自:http://developer.51cto.com/art/201009/223337_1.htm 你对DIV CSS布局中绝对定位和浮动的概念及使用是否熟悉,这里和大家分享一下,CSS中,实 ...

  3. DIV+CSS如何让图片和文字在同一行！

    在div+css布局中,如果一行(或一个DIV)内容中有图片和文字的话,图片和文字往往会一个在上一个在下,这是一个新手都会遇到问题,我的解决方法有三: 1.添加CSS属性:vertical-align ...

  4. DIV+CSS布局中自适应高度的解决方法

    div乱跑问题  (文件<DIV+CSS布局中自适应高度的解决方法.rar>)   float 是个很危险的东西 得小心使用 本来有一很好的关于CSS+DIV的论坛 不过现在关门了 甚是可 ...

  5. DIV+CSS布局中主要CSS属性介绍

    Float: Float属性是DIV+CSS布局中最基本也是最常用的属性,用于实现多列功能,我们知道<div>标签默认一行只能显示一个,而使用Float属性可以实现一行显示多个div的功能 ...

  6. DIV CSS布局中position属性用法深入探究

    本文向大家描述一下DIV CSS布局中的position属性的用法,position属性主要有四种属性值,任何元素的默认position的属性值均是static,静态.这节课主要讲讲relative( ...

  7. 透过现象看webpack处理css文件中图片路径转换的具体过程

    webpack是目前使用比较流行的一个前端模块打包器,前端的任何资源都被当成一个模块来处理,如图片.css文件等等.在基于webpack构建的前端项目中,一般都会配置有关css文件处理的规则,这其中也 ...

  8. div图片垂直居中 如何使div中图片垂直居中

    (从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期 2014-04-03) 『此方法在ie7下,如果.box的高度为800等比较大的数值时,并不能起到垂直居中的作用.』 点评:关于图片垂 ...

  9. DIV+CSS如何让文字垂直居中?（转）

    此篇文章转自网络,但是我忘了原文地址,如果有人知道,麻烦告知一声~ 在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少 ...

随机推荐

  1. gitignore 规范

    gitignore 应该包含 5 块内容: 当前项目需要忽略的文件 项目性质需要忽略的文件(比如是 nodejs 项目,有些文件就需要忽略) 所有项目都需要忽略的文件(比如日志.临时文件) 操作系统需 ...

  2. 用CSS3写一个立方体

    <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...

  3. H3 BPM初次安装常见错误详解5-7

    错误5:登陆无反应,F12查看后台网络请求错误如下图所示  错误原因:ISAPI未对相应的.net版本允许. 解决方法:IIS的根节点--右侧"ISAPI和CGI限制"打开--将相 ...

  4. react-native-vector-icons的简单使用,图片,按钮,标签视图,导航条

    ICONS是可以直接使用图片名, 就能加载图片的三方,使用很方便, 你不需要在工程文件夹里塞各种图片, 节省很多空间,下面就来看看怎么使用吧! 1. 首先打开terminal进入到我们的工程文件夹下, ...

  5. android:使用Messenger进行进程间通信(一)

    Messenger简介 Messenger和AIDL是实现进程间通信(interprocess communication)的两种方式. 实际上,Messenger的实现其实是对AIDL的封装. Me ...

  6. Atitit.redis操作总结

    Atitit.redis操作总结 1.1. 获取redis所有kv1 1.2. dbsize:返回当前数据库中key的数目 1 1.3. 一起吧所有key列出来1 1.4. Java连接redis   ...

  7. SQL Server数据库性能优化技巧

    查询速度慢的原因很多,常见如下几种: 1.没有索引或者没有用到索引: 2.I/O吞吐量小,形成了瓶颈效应: 3.内存不足: 4.网络速度慢: 5.查询出的数据量过大: 6.锁或者死锁: 7.返回了不必 ...

  8. 国际化（Internationalization）

    1:什么是国际化? 国际化(internationalization)是设计和制造容易适应不同区域要求的产品的一种方式.它要求从产品中抽离所有的与语言,国家/地区和文化相关的元素.换言之,应用程序的功 ...

  9. CSS3文字渐变效果

    background-clip + text-fill-color下的实现 如果您手头上的浏览器是Chrome或是Safari,则您可以在demo页面中看到类似下面的效果: <h2 class= ...

  10. yii2使用小知识(连续补充)

    1,打印ar或者query的原始sql: $query = (new \yii\db\Query())->select(['a.username','b.item_name'])->fro ...