今天我们对前一天(day2)的图片中的,垂直居中效果做一个详细的解释,而且是方便初学者的理解。
我当时学这里的时侯并不清晰(上课老师就说这么实现,也没说具体怎么实现),有自己摸索了一番,总结出了一个比较通俗易懂的解释。
首先明确,这里面其实是有这样3部分:①最外面的p9②文本整体line③文本里面的文字。
然后我们在脑子里要有这样几个认知:
1、文本这个整体(也就是②)默认是靠上对齐的(在这即顶着p9的上沿)
2、文本里面的文字,在文本这个整体中居中显示
首先我们将p9段落的高度设置100px,背景颜色设置为灰色(帮助我们理解,将这100px的高度展示出来)
.p9 { height: 100px; background-color: gray;}
当p9中有文字的时侯,因为之前提到的认知1,文字会实现如下效果。(height是指元素的高度,这里我们就是将p9这个段落的高度设置为了100px,而,文本整体的高默认是21px左右。文本这个整体的大小,小于p9的高度,且文本中文字的大小默认与文本整体大小相近,就会实现下面的效果,这不难想象。)
而如果,我们将文本这个整体的高度变高,按照这个理解,因为文字在文本整体中居中,不改变文字本身大小,文本整体变高,那么文字在会就相对于p9的上沿下移,下面我们试着将文本的整体高度变为60px来试试。
.p9 { height: 100px; background-color: gray;line-height: 60px;}
很明显,文字实现了下移,根据这个原理,如果我们将文本整体的高度变为和p9高度相同,那么我们就可以实现垂直居中效果。 (如下图)
.p9 { height: 100px; background-color: gray;line-height: 100px;} /* 垂直居中 */