CSS vertical-align垂直对齐方式属性用于定义嵌入式或表格单元格框的垂直对齐方式。vertical-align是CSS的重要的特性之一。对于初学者来说,开始可能不容易掌握,文章底部给出了示例,方便您快速理解掌握该属性。
它应用于内联或内联块元素。
它影响元素的对齐方式,而不影响其内容。(表格单元格除外)
当将其应用于表格单元格时,它将影响单元格的内容,而不是单元格本身。
值 | 描述 |
---|---|
baseline | 它将元素的基线与父元素的基线对齐。这是默认值。 |
length | 它用于按指定的长度增加或减少元素的长度。也可以使用负值。 |
% | 它用于按“行高”属性的百分比增加或减少元素。允许为负值。 |
sub | 对齐元素,就好像它是下标一样。 |
super | 它对齐元素,就好像它是上标一样。 |
top | 它将元素的顶部与线上的最高元素的顶部对齐。 |
bottom | 它将元素的底部与该行的最低元素对齐。 |
text-top | 元素的顶部与父元素的字体的顶部对齐。 |
middle | 元素放置在父元素的中间。 |
text-bottom | 元素的底部与父元素的字体的底部对齐。 |
initial | 它将此属性设置为其默认值。 |
inherit | 从其父元素继承此属性。 |
<!DOCTYPE html> <html> <head> <style> img.top { vertical-align: text-top; } img.bottom { vertical-align: text-bottom; } </style> </head> <body> <p><img src="/run/images/heart.jpg" alt="心型图案"/> 这是具有默认对齐方式的图像。</p> <p><img src="/run/images/heart.jpg" style="vertical-align: text-top;" alt="心型图案"/> 这是文本顶部对齐的图像。</p> <p><img src="/run/images/heart.jpg" style="vertical-align: text-bottom;" alt="心型图案"/> 这是具有文本底部对齐方式的图像。</p> </body> </html>测试看看‹/›
输出:
这是具有默认对齐方式的图像。
这是文本顶部对齐的图像。
这是具有文本底部对齐方式的图像。