解决icon图标跟文字在一行的问题

今天在做cmdb的时候,需要用到这种

前面是图标,后面是文字的情况.开始的时候总是不在同一条直线上.于是去除内容,用div找平,然后填充内容,从而最终弄平了.效果如下

 

 具体的html代码如下:

<div class="slideBarContainer">
      <router-link to="/home" active-class="active">
        <div class="slideBarItem" >
                      <svg-icon name="404" class="menu-icon"  ></svg-icon>
<!--          <div class="menu-icon"></div>-->
          <div class="title">事业部</div>
        </div>
      </router-link>
    </div>

css代码如下:

    .slideBarItem{
      display: flex;
      flex-direction: row;//主轴水平方向,左侧起头
      align-content: flex-start;//让图标和文字都横向从左往右排列
      color: #BFCBD9;
      height: 25px;//这是内高度,这个很关键,他+pading=父亲的高度;他=图片div=文字div的高度;文字div的高度=文字div的行高=文字上下居中;再配合文字左对齐,完美
      padding:  10px 10px 10px 10px; //图片和文字在一行的办法:行高
      .menu-icon{
        fill: currentColor;
        overflow: hidden;
        width: 25px;
        height: 25px;//这个高度跟父元素一样高,从而保证上下左右居中
      }
      .title{
        height: 25px;//这个高度等于父元素高度,从而保证文字在父元素上上下居中
        line-height: 25px;
        width: 100px;
        padding-left: 10px;
        text-align: left;//左对齐可以帮助字数不一致的时候显示好看点
      }
    }
    .slideBarItem:hover{
      background-color: #303133;
    }