发表于: 2017-04-21 21:29:41

2 671


今天完成的事:今天边task5,边复习之前position和垂直居中的知识点,不同的场景,需要用到不同的方法实现垂直居中,今天就好几次都没有很好的实现,一气之下就去把这个这个知识点狠狠啃一遍,手敲了自己的收获

明天的计划:快速把task5写完

遇到的问题:今天问了师姐好几个问题,有些本以为是出了bug,复查才发现是自己粗心修改的时候多删除了一个“符号,所以码代码还是要严谨,不然问题很严重,可能要费大量时间去排查

收获:

水平居中和垂直居中

水平:

1.文本text,用text-align:center;

2.块级元素,固定宽度,width:100%;margin:0 auto;

3.不定宽块级元素,

<1>.将块级元素变成行内元素display:inline;然后text-align:center;

<2>.通过给父元素设置 float,然后给父元素设置 position:relative 和 left:50%,子元素设置 position:relative 和 left: -50% 来实现水平居中

垂直:

1.单行文本,用height=line-height实现。

2.多行文本,设置块级元素display:table-cell;(表格单元显示),激活vertical-align属性,vertical-align:middle;

3,对于图片img,eg:<div class="header">

    <a href="#"><img src="task5-1_02.png" href="#"></a>

        <p>个人主页</p>

</div>

设置 .hearder a{display:inline-block},a变成块级元素,然后设置.header img{vertical-align:middle;}可以实现img垂直居中。


块级元素的垂直居中实现方法

1、绝对定位+固定宽高的垂直居中div{ position: absolute; width: 18em; height: 6em; top: 50%; left: 50%; margin-top: -3em;/*高度的一半*/ margin-left: -9em;/*宽度的一半*/ }

原理:这种居中的方法本质上做了两件事,一是先把需要居中的元素的左上角放在视口(或具有定位属性的父元素)的正中心,然后再利用负外边距把它向左、向上移动自身宽高的一半,从而使元素水平和垂直居中。

2、绝对定位+自适应宽高的垂直居中

CSS3为我们提供的2D转换属性中的translate属性恰好是以元素自身尺寸为基准进行换算和移动的。div{ position: absolute; top: 50%; left: 50%; transform:translate(-50%,-50%); }(这条还没很好的理解,主要是还没用到)



返回列表 返回列表
评论

    分享到