【CSS】同一行文字,字体大小不同,实现垂直居中

话不多说,先来看一下默认情况下,字体大小不同的同一行文字是如何展示的,以下实例中添加了背景颜色,用于分辨:


总价200万最多省20万

样式如下:

此时看到页面如下:

放大来看看:

【CSS】同一行文字,字体大小不同,实现垂直居中_第1张图片

放大可以看到:最外层class为row的元素的高度=里面最大字体元素的高度;但是两边的小的为啥下面还留点儿空隙?为啥不居上或者居底显示呢?这里不是很明白,希望明白人来教教我。。。。。。

 

现在呢,我们想把它们垂直居中对齐,方法也很简单:(给每个子元素添加"vertical-align: middle;")

样式如下:

 

此时看到页面如下:(此时垂直居中了)

你可能感兴趣的:(CSS)