📌  相关文章
📜  CSS vertical-align属性

📅  最后修改于: 2020-11-06 01:03:15             🧑  作者: Mango

CSS vertical-align属性

CSS vertical-align属性属性用于定义嵌入式或表格单元格框的垂直对齐方式。它是CSS的不言自明的特性之一。对于初学者来说，这不是一件容易的事情。

它能做什么

  • 它应用于内联或内联块元素。
  • 它影响元素的对齐方式，而不影响其内容。 (表格单元格除外)
  • 当将其应用于表格单元格时，它将影响单元格的内容，而不是单元格本身。

CSS垂直对齐值

value description
baseline It aligns the baseline of element with the baseline of parent element. This is a default value.
length It is used to increase or decrease length of the element by the specified length. negative values are also allowed.
% It is used to increase or decrease the element in a percent of the “line-height” property. negative values are allowed.
sub It aligns the element as if it was subscript.
super It aligns the element as if it was superscript.
top It aligns the top of the element with the top of the tallest element on the line.
bottom It aligns the bottom of the element with the lowest element on the line.
text-top the top of the element is aligned with the top of the parent element’s font.
middle the element is placed in the middle of the parent element.
text-bottom the bottom of the element is aligned with the bottom of the parent element’s font.
initial It sets this property to Its default value.
inherit inherits this property from Its parent element.

CSS垂直对齐示例








Good Morning Friends This is an image with a default alignment.
 

Good Morning Friends This is an image with a text-top alignment.
 

Good Morning Friends This is an image with a text-bottom alignment.