前言
本文内容主要整理自《css世界》第八章的相关章节,觉得部分描述对日常开发非常有帮助,做了简要的整理。
font-size
line-height与font-size
一般情况下我们都是通过直接设置line-height的具体高度来设置行高的,但如果我们设置的为数字,那么行高便是依据字号大小来设置的。而需要额外注意的一点是,vertical-align也是依据这两者的关系进行计算的。
你可以在下面的codepen地址中查看样式效果。
codepen地址:链接
demo代码地址:链接
那么我们之前实现的图片与文字同时排列时的垂直居中方案便有了第二种解决方案,便是vertical-align:25%,辅助加相对定位子元素top50%,当然为了更好的让其适合更多的图形,你可以使用transform来实现类似的效果。
最终的位置,距离顶部 = pHeight/4 +cHeight/2