html 垂直底端对齐,CSS vertical-align(垂直对齐)

CSS vertical-align(垂直对齐)

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

它能做什么它应用于内联或内联块元素。

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

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

CSS vertical-align垂直对齐值值描述

baseline它将元素的基线与父元素的基线对齐。这是默认值。

length它用于按指定的长度增加或减少元素的长度。也可以使用负值。

%它用于按“行高”属性的百分比增加或减少元素。允许为负值。

sub对齐元素,就好像它是下标一样。

super它对齐元素,就好像它是上标一样。

top它将元素的顶部与线上的最高元素的顶部对齐。

bottom它将元素的底部与该行的最低元素对齐。

text-top元素的顶部与父元素的字体的顶部对齐。

middle元素放置在父元素的中间。

text-bottom元素的底部与父元素的字体的底部对齐。

initial它将此属性设置为其默认值。

inherit从其父元素继承此属性。

CSS垂直对齐在线示例

示例html>

img.top {

vertical-align: text-top;

}

img.bottom {

vertical-align: text-bottom;

}

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

   

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

   

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

  

测试看看‹/›

输出:

44e84b91b5127390ae75e0e379e155c6.png 这是具有默认对齐方式的图像。

44e84b91b5127390ae75e0e379e155c6.png 这是文本顶部对齐的图像。

44e84b91b5127390ae75e0e379e155c6.png 这是具有文本底部对齐方式的图像。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值