CSS vertical-align(垂直对齐)

由网友 大卫 发布 阅读 6

CSS vertical-align(垂直对齐)

CSS vertical-align垂直对齐方式属性用于定义嵌入式或表格单元格框的垂直对齐方式。vertical-align是CSS的重要的特性之一。对于初学者来说,开始可能不容易掌握,文章底部给出了示例,方便您快速理解掌握该属性。

它能做什么

  1. 它应用于内联或内联块元素。

  2. 它影响元素的对齐方式,而不影响其内容。(表格单元格除外)

  3. 当将其应用于表格单元格时,它将影响单元格的内容,而不是单元格本身。

CSS vertical-align垂直对齐值

描述
baseline它将元素的基线与父元素的基线对齐。这是默认值。
length它用于按指定的长度增加或减少元素的长度。也可以使用负值。
%它用于按“行高”属性的百分比增加或减少元素。允许为负值。
sub对齐元素,就好像它是下标一样。
super它对齐元素,就好像它是上标一样。
top它将元素的顶部与线上的最高元素的顶部对齐。
bottom它将元素的底部与该行的最低元素对齐。
text-top元素的顶部与父元素的字体的顶部对齐。
middle元素放置在父元素的中间。
text-bottom元素的底部与父元素的字体的底部对齐。
initial它将此属性设置为其默认值。
inherit从其父元素继承此属性。

CSS垂直对齐在线示例

<!DOCTYPE html>  
<html>  
<head>  
<style>  
img.top {  
    vertical-align: text-top;  
}  
img.bottom {  
    vertical-align: text-bottom;  
}  
</style>  
</head>  
<body>  
<p><img src="https://cdn.div.cn/static/uploads/code/2023-02-21/bd9663700738a301e05716974e6926d9.jpg" alt="心型图案"/> 这是具有默认对齐方式的图像。</p>   
<p><img src="https://cdn.div.cn/static/uploads/code/2023-02-21/bd9663700738a301e05716974e6926d9.jpg" style="vertical-align: text-top;" alt="心型图案"/> 这是文本顶部对齐的图像。</p>   
<p><img src="https://cdn.div.cn/static/uploads/code/2023-02-21/bd9663700738a301e05716974e6926d9.jpg" style="vertical-align: text-bottom;" alt="心型图案"/> 这是具有文本底部对齐方式的图像。</p>  
</body>  
</html>
测试看看‹/›

输出:

心型图案 这是具有默认对齐方式的图像。

心型图案 这是文本顶部对齐的图像。

心型图案 这是具有文本底部对齐方式的图像。

CSS 属性选择器 CSS Dimension(尺寸)