[散修弟子]CSS-6344|2018年05月15日的日报-技能树.IT修真院

发表于： 2018-05-15 22:49:35

2 562

今天完成的事情：

1.照师兄的建议尝试使用tranform来进行居中，并且寻找flex布局的相关教程进行了解（目前进度缓慢

2.完成了任务4的表单部分的样式

3.备案的初审通过

针对第一个简单写下样式：

.iphone_img img,.lock_img img{
    position: relative;
    padding-left: 43px;
    top:50%;
    transform: translateY(-50%);
}

不能缩进麻烦点），简单说下原理，在垂直进行50%移动的同时，也要对自身的50%进行反向移动，就可以达到居中的效果了。

针对第二点说下感想，花了好多时间在纠结如何将嵌套img标签的div与一个input width=100% 的样式

（两个标签都是position:relative)进行float:left的显示，花了好多时间纠结后也没一个答案，索性使用absolute

脱离原有文档流，直接进行并排显示。

至少在这点上，自认为是一个解决方案了。

.iphone_img img,.lock_img img{
    position: relative;
    padding-left: 43px;
    top:50%;
    transform: translateY(-50%);
}

.text_iphone,.text_lock{
    position: absolute;
    width: 100%;
    margin-left: 140px;
    height: 100px;
    border:none;
}