如何让一个图片和一个文字框居中对齐（如何让两个行内元素居中对齐）

2021年3月4日 133次阅读 来源: 道雄

这种对齐方式有两种情况
图片和文字框中都是居中的，这样看起来也是一种对齐情况，如图所示
《如何让一个图片和一个文字框居中对齐（如何让两个行内元素居中对齐）》
解决办法：
文字框设置line-height，然后图片的高度height=文字框line-height，再给图片设置
vertical-align=top，（有时候也会借助margin-top）这样图片相对外框向上，但是视觉上相对文字框居中。

//html
          <span class="brand"></span>
          <span class="name">{
  {seller.name}}</span>

//stylus
        .brand
          display inline-block
          vertical-align top
          width 30px
          height 18px
          background-image url("brand.png")
          background-size 30px 18px
          background-repeat no-repeat
        .name
          margin-left 6px
          font-size 16px
          line-height 18px
          font-weight bold

注：图画框一定要有display inline-block属性，不然无法给图片设置宽和高。

    原文作者：道雄
    原文地址: https://blog.csdn.net/qq_36836277/article/details/98178985
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞