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

<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. div span

    无牵无挂,不带任何样式,因此经常使用div完成整体样式的构建,span完成细微样式的构建. div为块级元素,span为行内元素. 使用div完成显示区域的居中.左右浮动等,完成整体的样式布局,然后在 ...

  2. Redis 3.2 Linux 环境集群搭建与java操作

    redis 采用 redis-3.2.4 版本. 安装过程 1. 下载并解压 cd /usr/local wget http://download.redis.io/releases/redis-3. ...

  3. JS笔记一

    最近有时间,觉得应该整理一下,额,就从很久之前的基础开始吧,正好也巩固下,菜鸟需要扎实基础. 下面是一个简单的调查表,因为没有写任何样式,所以就是简单的表单输入框之类的.选择“男”或者“女”时,会出现 ...

  4. 微博开放平台api使用

    前言:微博开放平台提供了微博数据的api接口,不仅可以直接通过api调用微博服务发布微博查询微博,更重要的是,可以在自己的网站上获得新浪微博api的授权,调用微博的某些内容,就好像我们再网站中看到好文 ...

  5. 自动更新补丁Security Update for Internet Explorer 10 for Windows Server 2008 R2 x64 Edition (KB2964358)失败

    下载http://www.microsoft.com/zh-CN/download/details.aspx?id=42581手动安装成功.

  6. Python之路----------生成器

    一.列表生成式 想想如何创建一个列表[0,1,2,3,4,5] l = [0,1,2,3,4,5] 如果上面的列表元素足够多的话,是不是会写很多代码?看看列表生成式怎么写 #列表生成式 l = [x ...

  7. 快速查找和你聊天人的IP和具体的物理所在地址

    附言 : 对于中秋佳节没有回家也没有外出的我,亦然选择闭关.本来是打算把这个公众号作为测试号的.但是发现这个号已经有注册有一年多了,怪可惜的!所以就用来发些教程图文,供给大家共同学习,也对自己进行不定 ...

  8. 完美解决 nginx No input file specified.

    一次开发中遇到了这个问题:No input file specified nginx版本1.8 找遍网络都是说 fastcgi_param SCRIPT_FILENAME $document_root ...

  9. 变量的解构赋值////////////z

    变量的解构赋值 数组的解构赋值 对象的解构赋值 字符串的解构赋值 数值和布尔值的解构赋值 函数参数的解构赋值 圆括号问题 用途 数组的解构赋值 基本用法 ES6允许按照一定模式,从数组和对象中提取值, ...

  10. kindEditor完整认识 PHP上调用并上传图片说明/////////////////////////////z

      最近又重新捣鼓了下kindeditor,之前写的一篇文章http://hi.baidu.com/yanghbmail/blog/item/c681be015755160b1d9583e7.html ...