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

那是我在夕阳下的code

时间:2020-01-21 20:17:01      阅读:71      评论:0      收藏:0      [点我收藏+]

标签:auto   移动端   play   div   round   code   height   垂直   ble   

布局
何如让一个标签上下左右都居中?这有什么难的,给定子标签的宽,再让它的边距上下为0,左右为auto;如下:

.child{width:10px;margin:0 auto;}//子标签

它就可以左右居中了。上下的话,就是让父标签展现成表格,子标签展现成单元格并把vertical-align属性设置成middle就可以了;

.father{display:table}
.child{display:table-cell;vertical-align: middle;}

它就可以了上下也居了。
但是...这种技术太老了!而且只适合pc端,移动端的不适合用这套...
其实移动端的不难,用flex布局。这布局也不难,不是特别高端的技术,所以应该把它学起来!不说了直接上代码。

.father{background-color: red;width: 120px;height: 110px;display: flex;justify-content:center;align-items:center;}
.child{background-color: blue;width: 20px;height: 10px;}

上面也是可以实现上下左右居中,而且flex布局不仅仅这有这样,它相当牛!
上面的核心代码:
display: flex;//标签展现成flex
justify-content:center;//让子标签水居中
align-items:center;//让子标签垂直居中

那是我在夕阳下的code

标签:auto   移动端   play   div   round   code   height   垂直   ble   

原文地址:https://www.cnblogs.com/10manongit/p/12222751.html

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