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

<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. Thread-Safe Resource Manager

    http://php.net/manual/en/internals2.memory.tsrm.php When PHP is built with Thread Safety enabled, th ...

  2. UPDATE INNER JOIN 两表联合更新

    UPDATE B_READMETER_HANDWORK INNER JOIN B_READMETER_ORDER_SP ON B_READMETER_HANDWORK.ID = B_READMETER ...

  3. Linux DNS配置

    1.安装bind #安装bind yum install -y bind bind-chroot bind-utils 2.主配置文件 vi /etc/named.conf #修改监听为本机IP li ...

  4. Sina 新浪Ip归属地Api 很好用的,使用get请求

    前言 这几天做了一个客服管理系统,需要根据游客的Ip获取他的归属地,刚开始使用了,www.ip138.com 抓取ip归属地,用这还可以,但是不显示国家:于是是找了这个新浪的Api,很不错啊 用法 1 ...

  5. C++ 小工具一键解决SVN Clean Up 失败的问题

    参考文章: 1.http://blog.csdn.net/luochao_tj/article/details/46358145 2.http://blog.csdn.net/segen_jaa/ar ...

  6. break和continue

    break语句会终止循环,continue会在执行过程中返回循环的开头.

  7. AFN和ASI区别

    AFN和ASI区别 一.AFN和ASI的区别 1.底层实现1> AFN的底层基于OC的NSURLConnection和NSURLSession2> ASI的底层基于纯C语言的CFNetwo ...

  8. 使用WKWebView遇到的坑

    苹果从iOS8开始推出了WKWebView,大有替换UIWebView的意思(尽管Xcode中还没给UIWebView标记过期版本),所以决定将项目进行适配,iOS8及以上版本,改用WKWebView ...

  9. SLP测试记录

    个人感觉来说这个游戏对我没有什么吸引力...完全不知道用户需求在哪...是我最不喜欢的一个游戏 不过听制作团队之前的介绍,这应该不算是一个游戏,而是一个游戏练习器?所以从游戏的角度来评判的话感觉有很多 ...

  10. Linux 使用本地yum源及软件包管理

    [root@node130 rh]# pwd/opt/rh[root@node130 rh]# lsrhel-server-6.4-x86_64-dvd.iso [root@node130 rh]#m ...