css 水平垂直居中
主要是垂直居中有点麻烦,以下代码可以实现,先记下来:
<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 水平垂直居中的更多相关文章
- CSS水平垂直居中总结
行内元素水平居中 把行内元素包裹在块级父元素中,且父元素中的css设置text-align:center; <!DOCTYPE html> <html> <head> ...
- css水平垂直居中对齐方式
1.文字或者内联元素的垂直水平居中对齐 css属性 -- 水平居中:text-aligin:center; 垂直居中: line-height:height; 例子:. html: <div c ...
- 把简单做好也不简单-css水平垂直居中
44年前我们把人送上月球,但在CSS中我们仍然不能很好实现水平垂直居中. 作者:Icarus 原文链接:http://xdlrt.github.io/2016/12/15/2016-12-15 水平垂 ...
- CSS水平垂直居中的方法
原文链接:http://caibaojian.com/370.html 水平垂直居中,特别是使用在列表的时候经常会用到的,以前有需求的时候我也做过类似的代码,是使用display:table-cell ...
- css 水平垂直居中总结
空闲总结了下水平垂直居中方案,欢迎补充: 水平居中 水平居中有两种情况: 子元素是内联元素 这种那个情况下只需要在父元素定义: text-align:center; 例子: html: //省略了bo ...
- CSS水平垂直居中的几种方法2
直接进入主题! 一.脱离文档流元素的居中 方法一:margin:auto法 CSS代码: div{ width: 400px; height: 400px; position: relative; b ...
- CSS水平垂直居中的几种方法
直接进入主题! 一.脱离文档流元素的居中 方法一:margin:auto法 CSS代码: div{ width: 400px; height: 400px; position: relative; b ...
- 常见的几种 CSS 水平垂直居中解决办法
用CSS实现元素的水平居中,比较简单,可以设置text-align center,或者设置 margin-left:auto; margin-right:auto 之类的即可. 主要麻烦的地方还是在垂 ...
- 介绍一种css水平垂直居中的方法(非常好用!)
这次介绍一下一个水平垂直居中的css方法,这个方法可以说是百试百灵,废话不多说,直接附上代码: html,body{ width:100%; height:100%; } 你需要居中的元素{ posi ...
- css水平垂直居中
margin法(水平居中) 需要满足三个条件: 元素定宽 元素为块级元素或行内元素设置display:block 元素的margin-left和margin-right都必须设置为auto 三个条件缺 ...
随机推荐
- Nodejs:fs模块 & rimraf模块
模块fs:可以通过他管理文件系统,文件的写入,删除等操作 模块rimraf: 递归删除文件的node插件,在项目的文件编译之前,可以清除dist文件夹里的内容 API样例: var fs = ...
- tp文件上传;org/RBAC.class.php 权限类;think/page,class,php分页类;
一.上传表单: 注意,要使用上传功能 你的表单需要设置 enctype="multipart/form-data" <form action="__URL__/up ...
- selenium python 安装
环境为Win64位系统,默认已经安装python2.7到D:\Python27,此次使用的浏览器为chrome 下面是selenium的安装和chromedriver.exe的下载 1.安装selen ...
- logstash使用
简介 Logstash是一个接收,处理,转发日志的工具.支持系统日志,webserver日志,错误日志,应用日志,总之包括所有可以抛出来的日志类型.怎么样听起来挺厉害的吧?在一个典型的使用场景下(EL ...
- Gradle 刷新依赖
$ ./gradlew build --refresh-dependencies
- Java:对象的强、软、弱、虚引用
转自: http://zhangjunhd.blog.51cto.com/113473/53092 1.对象的强.软.弱和虚引用 在JDK 1.2以前的版本中,若一个对象不被任何变量引用,那么程序就无 ...
- css引入方式
1.<style> body{} </style> 2.写在一个单独的文件里面保存即新建一个文件:xx.css; 注明该文件的位置<link re ...
- [原创]解决net-speeder与pptp不兼容的问题
解决net-speeder与pptp不兼容的问题 终于受不了很多玩意儿都被墙了,每次FQ费半天劲,浪费时间,于是在搬瓦工搞了个VPS,年付19美元,挺便宜的,赶紧的VPN搭起,优化走起. VPN搭建很 ...
- 开启JMX功能,使JVisvualVM能够连接JVM
-Dcom.sun.management.jmxremote.port=1099 -Dcom.sun.management.jmxremote.ssl=false -Dcom.sun.manageme ...
- javascript的缓动效果
这部分对原先的缓动函数进行抽象化,并结合缓动公式进行强化.成品的效果非常惊人逆天.走过路过不要错过. 好了,打诨到此为止.普通的加速减速是难以让人满意的,为了实现弹簧等让人眼花缭乱的效果必须动用缓动公 ...