发表于: 2017-04-02 23:58:35
1 635
今天完成的事情:大致完成了任务五,在任务中遇到了很多居中问题,在此总结一下:
子块在父块中居中:
水平居中:
1..child{margin:0 auto;}
2..parent{position:relative;}
.child {position:absolute;
margin:auto;
left:0;
right:0;}
3..parent {display:table;}
.child {display:table-cell;
text-align:center;}
4..parent {position:relative;}
.child {width:box;
height:max;
position:absolute;
top:50%;
left:50%;
margin:-m/2 0 -n/2 0;}
5..parent {display:flex;
justify-content:center;}
垂直居中:
1..parent {position:relative;}
.child {position:absolute;
margin:auto;
top:0;
bottom:0;}
2.parent {display:table;}
.child {display:table-cell;
vertical-align:middle;}
3..parent {display:flex;
align-items:center;}
明天计划的事情:
修改任务5的bug,学习bootstrap,做任务6。
遇到的问题:
如图,文字被挤下来了。
收获:
学会了一些居中方式,对布局的理解更深了。
评论