vertical-align 调整行内元素对齐

最新推荐文章于 2021-06-07 13:22:00 发布

夜跑者

最新推荐文章于 2021-06-07 13:22:00 发布

阅读量183

点赞数 2

分类专栏： CSS

本文链接：https://blog.csdn.net/liubangbo/article/details/111999023

版权

CSS 专栏收录该内容

46 篇文章 1 订阅

订阅专栏

在电商项目中，经常会搞活动，标上价格后，后面再跟个活动名称，例如：

代码如下：


<html>
  <head>
    <style type="text/css">
      .cls{
        width: 60px; 
        height: 40px; 
        background-color: red; 
        text-align: center; 
        line-height: 40px;
        display: inline-block;
        vertical-align: text-bottom
      }
    </style>
  </head>

  <body>
      <div >
        <span style="font-size: 20px">¥</span>
        <span style="font-size: 60px;">2999</span>
        <span style="font-size: 20px;">.90</span>
        <div class="cls">优惠价</div>
      </div>
    <script>

    </script>
  </body>
</html>

我们设置了vertical-align为text-bottom，从图中我们看到并没有底边对齐，有没有办法让它们一点不差的底边对齐呢？设置vertical-align为12px就可以了，效果如下：