前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >CSS-vertical-align

CSS-vertical-align

原创
作者头像
BNTang
发布2023-09-29 07:36:07
1580
发布2023-09-29 07:36:07
举报
文章被收录于专栏:『学习与分享之旅』

设置元素的垂直方向对齐方式

vertical-align 相关注意点

text-align 是设置给需要对齐元素的父元素 vertical-align 是设置给需要对齐的那个元素本身 vertical-align 只对行内元素有效

默认情况下图片和一行文字的基线对齐,基线就是一行文字中最短那个文字的底部

代码语言:html
复制
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vertical-align</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 400px;
            background: skyblue;
            font-size: 40px;
            margin: 200px auto;
            line-height: 100px;
        }
        img{
           /*
            vertical-align: baseline;
            vertical-align: top;
            vertical-align: bottom;
            vertical-align: text-top;
            vertical-align: text-bottom;
            */
            vertical-align: middle;
        }
    </style>
</head>
<body>
<div>BNTang<img src="images/dog.jpg" alt=""></div>
</body>
</html>

我正在参与2023腾讯技术创作特训营第二期有奖征文,瓜分万元奖池和键盘手表

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档