Skip to content

vertical-align ​

描述 ​

vertical-align CSS 属性设置内联、内联块或表格单元格框的垂直对齐方式。

效果展示 ​

语法 ​

css
/* Keyword values */
vertical-align: baseline;
vertical-align: sub;
vertical-align: super;
vertical-align: text-top;
vertical-align: text-bottom;
vertical-align: middle;
vertical-align: top;
vertical-align: bottom;

/* <length> values */
vertical-align: 10em;
vertical-align: 4px;

/* <percentage> values */
vertical-align: 20%;

值 ​

  • baseline 将元素的基线与其父元素的基线对齐。 HTML 规范未指定某些替换元素(例如 <textarea> )的基线,这意味着它们使用此关键字的行为可能会因浏览器而异。
  • sub 将元素的基线与其父元素的下标基线对齐。
  • super 将元素的基线与其父元素的上标基线对齐。
  • text-top 将元素的顶部与父元素字体的顶部对齐。
  • text-bottom 将元素的底部与父元素字体的底部对齐。
  • middle 将元素的中间与基线加上父级 x 高度的一半对齐。
  • <length> 将元素的基线与其父元素基线上方的给定长度对齐。允许负值。
  • <percentage> 将元素的基线与其父元素基线上方的给定百分比对齐,该值是 line-height 属性的百分比。允许负值。

表格单元格的值 ​

  • baseline (and sub, super, text-top, text-bottom, <length>, and <percentage>) 将单元格的基线与行中基线对齐的所有其他单元格的基线对齐。
  • top 将单元格的上内边距边缘与行的顶部对齐。
  • middle 将单元格的填充框置于行中的中心。
  • bottom 将单元格的底部填充边缘与行的底部对齐。