第四回:vertical-align线类属性值深入理解

——深入理解vertical-align底线、顶线、中线的行为表现

vertical-align:bottom

定义

  1. inline/inline-block元素: 元素底部和整行的底部对齐。
  2. table-cell元素: 单元格底padding边缘和表格行的底部对齐。

inline元素

图文就是这么回事 bottom对齐

bottomx-baseline

table-cell元素

一行文字

<p>block水平元素
两行元素</p>

inline-block水平
一行文字

<p>block水平元素
两行元素</p>

x
inline-block水平

vertical-align:top

定义

  1. inline/inline-block元素: 元素顶部和整行的顶部对齐。
  2. table-cell元素: 单元格顶padding边缘和表格行的顶部对齐。

inline元素

图文就是这么回事 top对齐

x-baselinetop

table-cell元素

一行文字

<p>block水平元素
两行元素</p>

inline-block水平
一行文字

<p>block水平元素
两行元素</p>

x
inline-block水平

vertical-align:middle

定义

  1. inline/inline-block元素: 元素的垂直中心点和父元素基线上1/2 x-height处对齐。
  2. table-cell元素: 单元格填充盒子相对于外面的表格行居中对齐。

从某简单现象说开去...

(近似)垂直居中

p { line-height: 250px; }
img { vertical-align: middle; }

x

为何是近似垂直居中?

(近似)垂直居中

根据定义:元素垂直中心点和父级基线上1/2 x-height对齐

x

黄线:容器中心;红线:图片中心

font-size(24-120):

(完全)垂直居中

根据定义:元素垂直中心点和父级基线上1/2 x-height对齐

设置font-size:0

x

黄线:容器中心;红线:图片中心

table-cell元素

一行文字

<p>block水平元素
两行元素</p>

x inline-block水平
一行文字

<p>block水平元素
两行元素</p>

inline-block水平

为何块状文字居中了而内联的图片不是垂直居中?

td单元格不足高度会用padding填补

下回预告:vertical-align文本类属性值

——说说vertical-align:text-top/text-bottom