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. 9.2.3 .net core 通过TagHelper封装控件

    .net core 除了继续保留.net framework的HtmlHelper的写法以外,还提供了TagHelper和ViewComponent方式生成控件. 我们本节说的是使用TagHelper ...

  2. java转换 HTML字符实体，java特殊字符转义字符串

    为什么要用转义字符串? HTML中<,>,&等有特殊含义(<,>,用于链接签,&用于转义),不能直接使用.这些符号是不显示在我们最终看到的网页里的,那如果我们希 ...

  3. SSM三大框架整合详细教程（Spring+SpringMVC+MyBatis）【转】

    使用SSM(Spring.SpringMVC和Mybatis)已经有三个多月了,项目在技术上已经没有什么难点了,基于现有的技术就可以实现想要的功能,当然肯定有很多可以改进的地方.之前没有记录SSM整合 ...

  4. JS获取当前时间

    setInterval("getTime();", 1000); function getTime() { //document.getElementById('linkweb') ...

  5. ES5概述（ECMAScript262/5.1）

    ES5概述(ECMAScript262/5.1) 本文参考:ES5概述 ECMAScript 是基于对象的: 基本语言和宿主设施都由对象提供,ECMAScript 程序是一组可通信的对象.ECMASc ...

  6. 从Java String实例来理解ANSI、Unicode、BMP、UTF等编码概念

    转(http://www.codeceo.com/article/java-string-ansi-unicode-bmp-utf.html#0-tsina-1-10971-397232819ff9a ...

  7. 深入理解SQL注入绕过WAF和过滤机制

    知己知彼,百战不殆 --孙子兵法 [目录] 0x0 前言 0x1 WAF的常见特征 0x2 绕过WAF的方法 0x3 SQLi Filter的实现及Evasion 0x4 延伸及测试向量示例 0x5 ...

  8. 如何理解javaScript对象？

    在我们生活中,常常会提到对象一词,如:你找到对象了吗?你的对象是谁呀?等等. 在我们家庭中,有男友的女青年都会说我有对象了,那么她的对象是XX(她的男友). 夫妻间呢?都会说我的爱人是谁谁谁,现在我们 ...

  9. AngularJS 模块& 表单

    模块定义了一个应用程序. 模块是应用程序中不同部分的容器. 模块是应用控制器的容器. 控制器通常属于一个模块. 应用("myApp") 带有控制器 ("myCtrl&qu ...

  10. VNC connect:Connection refused(10061)

    在Windows机器上使用VNC Viewer访问Linux服务器,有时候会遇到"connect:Connection refused(10061)"这个错误,导致这个错误出现的原 ...