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 三个条件缺 ...
随机推荐
- poj1753
#include <stdio.h> char s[100][100]; int s1[100][100]; int ax[5]={0,-1,0,1,0}; int ay[5]={0,0, ...
- 【php】命名空间 和 自动加载的关系
目的 本文的目的主要是说明 命名空间的 use 关键词 和 new ClassName 这两个步骤,哪个步骤才会执行自动加载,这是逻辑有点混乱的表现,这种想法也是很正常的,让我们来解密吧 命名空间(n ...
- 正则表达式中的exec和match方法的区别
正则表达式中的exec和match方法的区别 字符串的正则方法有:match().replace().search().split() 正则对象的方法有:exec().test() 1.match m ...
- [软件测试基础3]基于Jemter的压力测试
一.整体目标 安装LAMP待测系统,推荐ECShop,基于此进行Jmeter压力测试,并在测试后得出Jmeter测试报告,并根据sysstat得出Linux服务器的CIMN(CPU,IO,Memory ...
- swiper.animate~之~可以执行两种动画的升级版的Swiper Animate
1.下载插件swiper.animate-twice.min.js,加载进页面. <!DOCTYPE html> <html> <head> ... < ...
- SpringMVC常用配置-Controller返回格式化数据如JSON、XML的配置方式和机制
- Windows Server 2008 R2 域控服务器运行nslookup命令默认服务器显示 UnKnown
一.问题: 域控服务器DOS窗口运行nslookup命令提示如下: 二.原因分析: 主要原因在于域控服务器的DNS服务器没有设置反向查找区域,计算机名称是通过IP地址反向查找到域控服务器的计算机名称. ...
- layoutSubviews
- python不是内部或外部命令
原因是环境变量没有添加. 比如python安装再C:\Python27 环境变量path增加C:\Python27即可,不需重启. 但是之前报错的cmd窗口需要重新打开再执行python命令
- Python爬虫爬取豆瓣电影名称和链接,分别存入txt,excel和数据库
前提条件是python操作excel和数据库的环境配置是完整的,这个需要在python中安装导入相关依赖包: 实现的具体代码如下: #!/usr/bin/python# -*- coding: utf ...