11.17　垂直对齐元素

可以使用除默认方式以外的多种方式对齐元素，让它们在页面上显得较为整齐（如图11.17.1、图11.17.2和图11.17.3所示）。

11.17　垂直对齐元素 - 图1

图11.17.1　图像默认对齐行的底部

  1. .thumbnails img {
  2.      vertical-align: middle;
  3. }

图11.17.2　注意，对齐是对图像本身设置的，而不是对包含图像的列表项目（li）设置的。（关于列表，参见第15章。）

11.17　垂直对齐元素 - 图2

图11.17.3　现在，图像对齐行的中线

使元素垂直对齐的步骤

  • 输入vertical-align:。

  • 输入baseline，使元素的基准线对齐父元素的基准线；

或者输入middle，使元素的中线对齐父元素的中线；

或者输入sub，使元素成为父元素的下标；

或者输入super，使元素成为父元素的上标；

或者输入text-top，使元素的顶部对齐父元素的顶部；

或者输入text-bottom，使元素的底部对齐父元素的底部；

或者输入top，使元素的顶部对齐当前行里最高元素的顶部；

或者输入bottom，使元素的底部对齐当前行里最低元素的底部；

或者输入元素行高的百分比，可以是正数，也可以是负数。

提示　vertical-align属性仅对显示为行内元素的元素有效，对显示为块级元素的元素无效。更多细节参见Chris Coyier的解释：http://css-tricks.com/what-is-vertical-align/。