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 三个条件缺 ...
随机推荐
- Javascript,颜色渐变效果的处理
在搭建博主博客的时候,寻思着做一些效果,看到菜单,就想是不是可以做一下颜色的渐变,增加一点动态的感觉.有个jquery的插件,效果相当不错,不过博主还是打算自立更生写一下,看看能不能实现. 下面就是博 ...
- MyBatis学习总结(二)——使用MyBatis对表执行CRUD操作(转载)
本文转载自:http://www.cnblogs.com/jpf-java/p/6013540.html 上一篇博文MyBatis学习总结(一)--MyBatis快速入门中我们讲了如何使用Mybati ...
- centos7设置网关
1.cd /etc/sysconfig/network-scripts 2.vi 网络文件 3.service network restart
- 【转】24Cxx 系列EEPROM通用程序及应用
关于I2C 学习的时候介绍得最多的就是24C02 这里存储EEPROM了,但学的时候基本只是讲讲简单的I2C 的总线数据传输而已,即使先gooogle上搜索也绝大部分这这样的文章,很少有说到如何在实际 ...
- asp.net mvc中ViewData、ViewBag和TempData的详解
一.ViewData和ViewBag 1.ViewData和ViewBag都是从Action向View传递数据的方式,当然还有其他方式如向View传递Model. 2.ViewData页面查询数据时需 ...
- docker好文收藏
深入浅出Docker(一):Docker核心技术预览 2. 核心技术预览 Docker核心是一个操作系统级虚拟化方法, 理解起来可能并不像VM那样直观.我们从虚拟化方法的四个方面:隔离性.可配额/可度 ...
- 第四篇:白话tornado源码之褪去模板外衣的前戏
加班程序员最辛苦,来张图醒醒脑吧! ... ... ... 好了,醒醒吧,回归现实看代码了!! 执行字符串表示的函数,并为该函数提供全局变量 本篇的内容从题目中就可以看出来,就是为之后剖析tornad ...
- xl2tp部署
参考 http://blog.51yip.com/linux/1795.html 说到VPN,就会想到google,满心的疼.以前写过一篇关于vpn的文单,请参考:centos5.5 vpn 安装配置 ...
- Redis在Linux下的安装和启动和配置
第一步:下载Redis安装包,下载版本:3.0.5 在所在目录右键打开终端输入命令: wget http://download.redis.io/releases/redis-3.0.5.tar.gz ...
- zjuoj 3780 Paint the Grid Again
http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemCode=3780 Paint the Grid Again Time Limit: 2 ...