主要是垂直居中有点麻烦,以下代码可以实现,先记下来:

<style type="text/css">

   div{ border:1px solid #ccc; height:500px; width:500px; text-align:center; margin:0 auto; background:#ccc;}

   img{ vertical-align:middle; }

   div span{ height:100%; width:0; overflow:hidden; display:inline-block; vertical-align:middle; }

</style>

<div class="test">

<img src="icon.png"><span> </span>

</div>

  

css 水平垂直居中的更多相关文章

  1. CSS水平垂直居中总结

    行内元素水平居中 把行内元素包裹在块级父元素中,且父元素中的css设置text-align:center; <!DOCTYPE html> <html> <head> ...

  2. css水平垂直居中对齐方式

    1.文字或者内联元素的垂直水平居中对齐 css属性 -- 水平居中:text-aligin:center; 垂直居中: line-height:height; 例子:. html: <div c ...

  3. 把简单做好也不简单-css水平垂直居中

    44年前我们把人送上月球,但在CSS中我们仍然不能很好实现水平垂直居中. 作者:Icarus 原文链接:http://xdlrt.github.io/2016/12/15/2016-12-15 水平垂 ...

  4. CSS水平垂直居中的方法

    原文链接:http://caibaojian.com/370.html 水平垂直居中,特别是使用在列表的时候经常会用到的,以前有需求的时候我也做过类似的代码,是使用display:table-cell ...

  5. css 水平垂直居中总结

    空闲总结了下水平垂直居中方案,欢迎补充: 水平居中 水平居中有两种情况: 子元素是内联元素 这种那个情况下只需要在父元素定义: text-align:center; 例子: html: //省略了bo ...

  6. CSS水平垂直居中的几种方法2

    直接进入主题! 一.脱离文档流元素的居中 方法一:margin:auto法 CSS代码: div{ width: 400px; height: 400px; position: relative; b ...

  7. CSS水平垂直居中的几种方法

    直接进入主题! 一.脱离文档流元素的居中 方法一:margin:auto法 CSS代码: div{ width: 400px; height: 400px; position: relative; b ...

  8. 常见的几种 CSS 水平垂直居中解决办法

    用CSS实现元素的水平居中,比较简单,可以设置text-align center,或者设置 margin-left:auto; margin-right:auto 之类的即可. 主要麻烦的地方还是在垂 ...

  9. 介绍一种css水平垂直居中的方法(非常好用!)

    这次介绍一下一个水平垂直居中的css方法,这个方法可以说是百试百灵,废话不多说,直接附上代码: html,body{ width:100%; height:100%; } 你需要居中的元素{ posi ...

  10. css水平垂直居中

    margin法(水平居中) 需要满足三个条件: 元素定宽 元素为块级元素或行内元素设置display:block 元素的margin-left和margin-right都必须设置为auto 三个条件缺 ...

随机推荐

  1. LR11破解License

    golba-65000: AEACFSJI-YJKJKJJKEJIJD-BCLBR golba-100: AEAMAUIK-YAFEKEKJJKEEA-BCJGI web-10000: AEABEXF ...

  2. JavaScript对象属性(二)

    对象object  例子一: var car = { "wheels":4, "engines":1, "seats":5}; 例子二: v ...

  3. android 屏幕分辨率 更改

    手头上有一个320x240的LCD.运行android时,显示内容过大,需要更改屏幕的分辨率. 参考链接 http://www.bkjia.com/Androidjc/899396.html http ...

  4. linux io stack

  5. windows下Bat命令学习

    一.基础语法:1.批处理文件是一个“.bat”结尾的文本文件,这个文件的每一行都是一条DOS命令.可以使用任何文本文件编辑工具创建和修改.2.批处理是一种简单的程序,可以用 if 和 goto 来控制 ...

  6. [转]理解I/O Completion Port

    原文:http://dev.gameres.com/Program/Control/IOCP.htm 另附上:http://stackoverflow.com/questions/5283032/i- ...

  7. yii框架的理解

    Yii Framework是一个基于组件.用于开发大型 Web 应用的高性能 PHP 框架.Yii提供了今日Web 2.0应用开发所需要的几乎一切功能.Yii是最有效率的PHP框架之一. yii框架里 ...

  8. Linux 上从 MySQL 迁移到 MariaDB 的简单步骤

    大家好!这是一篇介绍如何在服务器或个人电脑上从MySQL迁移到MariaDB的教程.也许你会问为什么我们要将数据库管理从MySQL迁移到MariaDB.往下看我们告诉你为什么这样做.为什么要用Mari ...

  9. CCNET+MSBuild+SVN实现每日构建

    最近开始将源代码迁移到SVN,于是便考虑到如何从SVN定期获取源码,自动编译并部署以减轻工作量并提高工作效率.通过多方搜集资料并进行研究,基本实现了这个功能.对于每日构建的概念就不具体展开了,可以在各 ...

  10. Poj 1276 Cash Machine 多重背包

    Cash Machine Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 26172   Accepted: 9238 Des ...