码迷,mamicode.com
首页 > 其他好文 > 详细

让子元素在父元素中水平居中align-items

时间:2017-08-13 00:00:48      阅读:264      评论:0      收藏:0      [点我收藏+]

标签:lex   属性   items   说明   起点   需要   display   案例   css3   

做案例中,我们会发现让子元素在父元素中垂直居中,要设置margin和padding等,各种设置才能垂直居中

现在可以使用CSS3中的align-items实现

align-items 

定义子元素在父元素交叉轴上如何对齐的,大多数不理解交叉轴是什么,下面举例来说明,不多说直接上代码
技术分享

 现在是这样显示的,我需要让子元素在父元素中垂直居中

 技术分享

1需要给父元素加display:flex;(不明白的可以先查下,后期会说明这个属性的作用)

2.再给父元素(也就是box)加align-items:center;

 技术分享

 

 效果如下
技术分享

你会发现子元素已经在父元素垂直居中了,就是这么的easy

你可以把div的左上角看做交叉轴也就是X轴与Y轴的交叉点

当然align-items也有其他的属性

flex-start  项目位于容器的开头
flex-end 项目位于容器的结尾
center项目位于容器的中心
baseline 项目第一行文字的基线对齐
stretch如果子元素未设置或设置auto,将占满整个容器的高度
 
flex-start  项目位于容器的开头
 
上面说了可以把div的左上角看做交叉轴也就是X轴与Y轴的交叉点,那么这个交叉点也就是起点
技术分享

 

 效果:
技术分享

那么就是以左上角对齐

 

flex-end 项目位于容器的结尾

技术分享

效果:

技术分享

说白了就是靠底部对齐

baseline 项目第一行文字的基线对齐

技术分享

效果

技术分享

stretch如果子元素未设置或设置auto,将占满整个容器的高度

技术分享

技术分享

效果

技术分享

 

 我的子元素P标记未设置任何的高度,如果设置了该属性,则会继承父元素的高度

 

兼容性:

技术分享

 

 

让子元素在父元素中水平居中align-items

标签:lex   属性   items   说明   起点   需要   display   案例   css3   

原文地址:http://www.cnblogs.com/pangbo1213/p/7351877.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!