这种对齐方式有两种情况
图片和文字框中都是居中的,这样看起来也是一种对齐情况,如图所示
解决办法:
文字框设置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属性,不然无法给图片设置宽和高。