发表于： 2016-10-24 10:51:28
2 809
今天完成的事情：
1.完成了任务6，并在师兄的指导下修改了一些小问题；
链接： http://119.10.57.69:880/jnshu067/task6/task6-1.html
明天计划的事情：
1.开始任务7
2.搭建个人主页
遇到的问题&收获：
实现“图片和文字在同一父元素内垂直居中 ，同时文字相对于父元素水平居中”的方法：
1.背景大法：
将图片设置为span的背景，将背景的高设置为rem值并和文字行高保持一致，并设置：background-position：center center，使图片相对于span居中。最后设置<span>为绝对定位，使它脱离文本流不会对<p>造成干扰。
演示链接：
http://119.10.57.69:880/jnshu067/task6/task6-3test1.html
2.flex大法：
对父元素设置： display: flex; align-items: center;使子元素垂直居中。
将文字<p>部分的宽度设置为100%，同时添加margin-right：-10%；使图片元素不会挤压文本的宽度和布局。
http://119.10.57.69:880/jnshu067/task6/task6-3test2.html
返回列表
评论