• 有问题请联系QQ:2374146085
  • 有问题请联系QQ:2374146085

vertical-align属性

1年前 (2021-08-27) 948次浏览 已收录 0个评论

定义:用于设置一个元素的垂直对齐方式,只针对行内元素或者行内块元素

  • baseline 默认,元素放置在父元素的基线上
  • top 把元素的顶端与行中最高元素的顶端对齐
  • middle 把此元素放置在父元素的中部
  • bottom 把元素的顶端与行中最低的元素的顶部对齐

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片文字居中对齐</title>
    <style>
        img{
            vertical-align: bottom;
        }
    </style>
</head>
<body>
    <img src="images/tudou.jpg">pdsfdsafasf
</body>
</html>
结果演示

提示:

在插入图片后,图片下面会有一个空白空隙,原因是行内块元素会和文字的基线对齐

解决办法:

  • 给图片添加:vertical-align:Middle | top | bottom 等(提倡使用
  • 或者改为块级元素,(不常用,因为会独占一行)

 


渣渣龙, 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:vertical-align属性
喜欢 (0)

您必须 登录 才能发表评论!