使用弹性布局来解决令人烦恼的垂直居中问题~~
2016-06-30 20:46
363 查看
今天在公司做项目的时候,遇到一个让我无从下手的问题。
这样的一个父容器DIV包含连个不同的span标签。标签内的字体不一样,要如何实现两个标签在中轴线上实现垂直居中呢?
其他办法我实在想不出来,于是在同事的建议下使用了弹性布局,也就是flex。
下面简单的介绍一下flex布局。可参考阮一峰的flex布局:语法篇
Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。
可以在任何容器上使用;
例子:
在块状元素中
在行内元素可使用line-flex:
注:Webkit内核的浏览器,必须加上
使用display:flex的容器可看做一个父容器,父容器有以下6总属性。可根据需要类使用。
flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content
每种属性的详细介绍请看上面的阮一峰的文章连接。
这里介绍一下我实现上面的例子用到的属性:
align-items
这里显然使用center了。
然而这样就解决问题了,综合起来也就下面几行代码:
这样的一个父容器DIV包含连个不同的span标签。标签内的字体不一样,要如何实现两个标签在中轴线上实现垂直居中呢?
其他办法我实在想不出来,于是在同事的建议下使用了弹性布局,也就是flex。
下面简单的介绍一下flex布局。可参考阮一峰的flex布局:语法篇
Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。
可以在任何容器上使用;
例子:
在块状元素中
div{ display: flex; // }
在行内元素可使用line-flex:
.box{ display: inline-flex; }
注:Webkit内核的浏览器,必须加上
-webkit前缀。 即应写为: -webkit-flex
使用display:flex的容器可看做一个父容器,父容器有以下6总属性。可根据需要类使用。
flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content
每种属性的详细介绍请看上面的阮一峰的文章连接。
这里介绍一下我实现上面的例子用到的属性:
align-items
align-items属性定义项目在交叉轴上如何对齐。有五个值:
flex-start //可以理解为top flex-end //理解为bottom center //以父容器y轴的中轴线为中心,所有子元素都垂直居中于该线 baseline //项目的第一行文字的基线对齐 stretch //如果项目未设置高度或设为auto,将占满整个容器的高度
这里显然使用center了。
然而这样就解决问题了,综合起来也就下面几行代码:
div{ display: flex; align-items:center; } div span{ font-size: 28px; } div em{ font-size: 12px; }
相关文章推荐
- hdu 4985(模拟)
- 寻找奇数出现
- Maven install 报Fatal error compiling: tools.jar not found错误的处理
- Maven的生命周期
- 【bzoj4199】[Noi2015]品酒大会 后缀自动机
- C#标准查询运算符之推迟执行案例
- 嵌入式开发之secureCRT 的基本使用
- NoSql之Redis集群原理
- 记录自己的进步的点点滴滴
- 利用Nginx做负载均衡
- 微信点餐创业记
- 最大公共字符串输出
- 常用二极管IN4148和单片机驱动的一些关系
- 面试题21:包含min函数的栈
- Tomcat 7.0的配置及发布多个web应用以及不同端口多工程配置(第二版)
- QQ IDKey生成--一键加群
- 二叉树的镜像
- 倒计时练习
- Linux 下网络相关命令
- keil 之map文件应用