CSS:一行上不同大小的文字上下垂直居中对齐

举报
彭世瑜 发表于 2022/04/15 01:14:43 2022/04/15
2k+ 0 0
【摘要】 关键代码 /* 每个子元素增加对齐属性 */ .middle { vertical-align: middle; } 1234 完整代码 <style> bo...

在这里插入图片描述
关键代码

/* 每个子元素增加对齐属性 */
 .middle {
    vertical-align: middle;
}

  
 

完整代码

<style>
        body {
            height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        .row {
            background-color: #cccccc;
        }

        .row+.row {
            margin-top: 40px;
        }

        .title {
            font-size: 26px;
            background-color: #c9e2b3;
        }

        .price {
            font-size: 36px;
            background-color: #a6e1ec;
        }

        .label {
            font-size: 22px;
            background-color: #ff7800;
        }

        .middle {
            vertical-align: middle;
        }
    </style>

    <!-- 默认是不对齐的 -->
    <div class="row">
        <span class="title">总价</span>
        <span class="price">200万</span>
        <span class="label">最多省20万</span>
    </div>

    <!-- 垂直方向居中对齐 -->
    <div class="row">
        <span class="title middle">总价</span>
        <span class="price middle">200万</span>
        <span class="label middle">最多省20万</span>
    </div>

  
 

在线demo: https://mouday.github.io/front-end-demo/one-line-text.html

参考
【CSS】同一行文字,字体大小不同,实现垂直居中

文章来源: pengshiyu.blog.csdn.net,作者:彭世瑜,版权归原作者所有,如需转载,请联系作者。

原文链接:pengshiyu.blog.csdn.net/article/details/124165756

【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

作者其他文章

评论(0

抱歉,系统识别当前为高风险访问,暂不支持该操作

    全部回复

    上滑加载中

    设置昵称

    在此一键设置昵称,即可参与社区互动!

    *长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

    *长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。