css记忆知识点二

一、实现多行垂直居中

    
    
    
    
    


    

          

            因为内联元素默认都是基线对齐的，所以我们通过对.content 元素设置verticalalign:
            middle 来调整多行文本的垂直位置，从而实现我们想要的“垂直居中”效果。如果是
            要借助line-height 实现图片垂直居中效果，也是类似的原理和做法。
            细心的读者可能发现，上面我解释原理的时候，“垂直居中”这4 个字加了引号，莫非，
            这里的“垂直居中”又是“近似”？
          
    

备注：
（1）多行文字使用一个标签包裹，然后设置display 为inline-block。好处在于既能重置外部的line-height 为正常的大小， 又能保持内联元素特性， 从而可以设置vertical-align 属性，以及产生一个非常关键的“行框盒子”。我们需要的其实并不是这个“行框盒子”，而是每个“行框盒子”都会附带的一个产物—“幽灵空白节点”，即一个宽度为0、表现如同普通字符的看不见的“节点”。有了这个“幽灵空白节点”，我们的lineheight:120px 就有了作用的对象，从而相当于在.content 元素前面撑起了一个高度为120px 的宽度为0 的内联元素。
（2）因为内联元素默认都是基线对齐的，所以我们通过对.content 元素设置verticalalign:middle 来调整多行文本的垂直位置，从而实现我们想要的“垂直居中”效果。如果是要借助line-height 实现图片垂直居中效果，也是类似的原理和做法。