html - 带有居中图标的 Angular Material mat-nav-list 多行

Question

我正在努力尝试使用一些基于 mat-list-items 的两行设置 mat-nav-list。第一行应该是一个水平居中的图像，第二行是一个居中的标题文本。我都显示了，但是 img/icon 没有居中。 :/

这是一些代码:

<mat-nav-list class="list-container">
    <a mat-list-item routerLink="/somewhere" routerLinkActive="active-link">
      <span matLine class="icn_log"></span>
      <span matLine>Centered Text</span>
    </a> 
</mat-nav-list>

我也使用了一些样式，更多是为了去除填充和添加一些边框。但是我如何给带有图标的第一个跨度也命令居中呢？:

.list-container {
   width: 100%;
   padding-top: 1px;
   border-right: 1px solid;
   border-color: #ddd;
   text-align: center;
}

.list-container .mat-list-item {
   border: 1px solid;
   border-right: 0px;
   border-color: #ddd;
   margin-top: -1px;
   height: 80px;  
}

.list-container .mat-list-item .mat-line {
   padding-top: 5px;
   padding-bottom: 5px;
}

.icn_log {
   height: 32px;
   width: 32px;
   background-repeat: no-repeat;
   background-image: url("assets/img/log.png");
   background-position: 0;
}

播放一些代码:https://stackblitz.com/edit/angular-94jjyp

Answer 1

编辑 -

尝试将 icn_log 的背景位置从 0 更改为 center 并将 width 更改为 100%

.icn_log {
    width: 100%;
    background-position: center;
}