在一个div里面的两个span标签没有对齐，或者在一个div里面的两个div没有对齐

╰半夏微凉° 2022-05-25 20:19 283阅读 0赞

一、在一个div里面的两个span标签没有对齐，如下图红色圈所示

![20180430201025121][]

红色圈的html如下

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

部分css如下

.title
      margin:2px 0 8px 0
      .brand
        display: inline-block   /*span是inline元素，需设置成inline-block/block,设置width/height才能生效*/
        width:30px
        height:18px
        bg-image('brand')
        background-size :30px 18px
        background-repeat :no-repeat
      .name
        font-size:16px
        margin-left:6px
        font-weight:bold
        line-height:18px

要想让.brand和.name对齐，只需要在.brand或者.name中设置对齐方式：vertical-align:top，就ok了

更改后的css代码如下：

.title
      margin:2px 0 8px 0
      .brand
        display: inline-block   /*span是inline元素，需设置成inline-block/block,设置width/height才能生效*/
        width:30px
        height:18px
        bg-image('brand')
        background-size :30px 18px
        background-repeat :no-repeat
        vertical-align:top
      .name
        font-size:16px
        margin-left:6px
        font-weight:bold
        line-height:18px

显示效果如下：

![2018043020201321][]

二、在一个div里面的两个div没有对齐，下图中的左边是显示的效果，右边是代码结构

![2018043020335230][]

解决的方法还是在.avatar或者.content中设置对齐的方式，即vertical-align:top。

在.avatar或者.content中设置对齐的方式，即vertical-align:top之后，显示的效果.avatar和.content元素靠顶对齐了

![20180430203857146][]

[20180430201025121]: /images/20220526/f366203771294e7a854a3a1b785d69a9.png
[2018043020201321]: /images/20220526/4a63901a3d384366835c6930921bc496.png
[2018043020335230]: /images/20220526/714afd9e84104b75a433740e8362069d.png
[20180430203857146]: /images/20220526/cafcf4524cd04f29989fa4b243e3e3d1.png