关闭
> css教程 > css >

css实现同一行文字但字体大小不同的垂直居中办法

来源:网络 文章列表 2019-01-04 8
文字大小不一致时,给父元素、子元素都添加 vertical-align: middle; 即可实现文字都垂直对齐了

有时候我们在写样式的时候,会发现虽然是同一行文字,但是文字的大小不一致,此时文字的对齐方式并不居中,而我们又希望其能居中对齐。

首先我们来做个测试,有以下代码

<style>
* { padding: 0; margin: 0;}
.row { background-color: #cccccc;}
.zongjia {font-size: 26px; background-color: #c9e2b3;}
.price {font-size: 36px; background-color: #a6e1ec;}
.sheng { font-size: 22px; background-color: #ff7800;}
</style>
<div class="row">
    <span class="zongjia">总价</span><span class="price">200万</span><span class="sheng">最多省20万</span>
</div>

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

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

样式如下:

<style>
* { padding: 0; margin: 0;}
.row { background-color: #cccccc;}
.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>
<div class="row">
    <span class="zongjia">总价</span><span class="price">500万</span><span class="sheng">最多省20万</span>
</div>

看效果如下:

阿里云618优惠卷大放送

版权声明

本站部分原创文章,部分文章整理自网络。如有转载的文章侵犯了您的版权,请联系站长删除处理。如果您有优质文章,欢迎发稿给我们!联系站长:
愿本站的内容能为您的学习、工作带来绵薄之力。

评论

  • 随机获取
点击刷新
精彩评论