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

最新推荐文章于 2024-10-18 11:46:13 发布

qing_小诺

最新推荐文章于 2024-10-18 11:46:13 发布

阅读量2.2w

点赞数 16

CC 4.0 BY-SA版权

分类专栏： CSS

本文链接：https://blog.youkuaiyun.com/qq_33237207/article/details/84136169

CSS 专栏收录该内容

18 篇文章

订阅专栏

本文通过一个实例，展示了如何使用CSS的vertical-align属性实现不同字体大小的文字在同一行内的垂直居中对齐，解决了默认情况下小字体下方留空隙的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

话不多说，先来看一下默认情况下，字体大小不同的同一行文字是如何展示的，以下实例中添加了背景颜色，用于分辨：

<body>
<div class="row">
    <span class="zongjia">总价</span><span class="price">200万</span><span class="sheng">最多省20万</span>
</div>
</body>

样式如下：

<style>
        * {
            padding: 0;
            margin: 0;
        }

        .row {
            background-color: #cccccc;
            margin-top: 20px;
        }

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

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

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

</style>

此时看到页面如下：

放大来看看：

放大可以看到：最外层class为row的元素的高度=里面最大字体元素的高度；但是两边的小的为啥下面还留点儿空隙？为啥不居上或者居底显示呢？这里不是很明白，希望明白人来教教我。。。。。。

现在呢，我们想把它们垂直居中对齐，方法也很简单：（给每个子元素添加"vertical-align: middle;"）

样式如下：

 <style>
        * {
            padding: 0;
            margin: 0;
        }

        .row {
            background-color: #cccccc;
            margin-top: 20px;
            margin-left: 20px;
        }

        .zongjia {
            font-size: 26px;
            background-color: #c9e2b3;
            vertical-align: middle;
        }

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

        .sheng {
            font-size: 22px;
            background-color: #ff7800;
            vertical-align: middle;
        }
</style>

此时看到页面如下：（此时垂直居中了）