vertical-align超级详细简单易懂

行内级元素垂直对齐方式

必知的概念

中线、基线、顶线、底线

中线(middle)、基线(baseline)、顶线(text-top、底线(text-bottom))是文本的几个基本线,其对应位置如下图:

  • 基线(base line):小写英文字母`x`的下端沿。
  • 中线(middle line):小写英文字母`x`的中间。
  • 顶线(text-top):父元素 font-size 大小所组成的一个内容区域的顶部
  • 底线(text-bottom):父元素 font-size 大小所组成的一个内容区域的底部

vertical-align 取值

vertical-align 只接受8个关键字、一个百分数值或者一个长度值。下面我们将看看各关键字如何作用于行内元素。

默认的对齐方式为baseline,一般使用最多的就是middle,偶尔你还会看到使用像素来偏移。注意 text-top 及text-bottom 的对齐方式有点特别,不过实战中几乎不用。

对齐实战

本文章转载于imweb,原文地址为:行内级元素垂直对齐方式

猜你喜欢

转载自blog.csdn.net/Allenyhy/article/details/81477799