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

最新推荐文章于 2024-05-29 14:36:52 发布

qing_小诺

最新推荐文章于 2024-05-29 14:36:52 发布

阅读量2.1w

点赞数 14

分类专栏： CSS

本文链接：https://blog.csdn.net/qq_33237207/article/details/84136169

版权

CSS 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

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

<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>

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

qing_小诺

关注

14
点赞
踩
24

收藏

觉得还不错? 一键收藏
4
评论
【CSS】同一行文字，字体大小不同，实现垂直居中

话不多说，先来看一下默认情况下，字体大小不同的同一行文字是如何展示的，以下实例中添加了背景颜色，用于分辨：&lt;body&gt;&lt;div class="row"&gt; &lt;span class="zongjia"&gt;总价&lt;/span&gt;&lt;span class="price"&gt;200万&lt;/span&am
复制链接

扫一扫

专栏目录