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

【问题标题】：Angular Material mat-nav-list multiline with centered icon带有居中图标的 Angular Material mat-nav-list 多行
【发布时间】：2018-12-31 04:59:14
【问题描述】：

我正在努力尝试使用一些基于 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

【问题讨论】：

标签： html css angular angular-material angular6

【解决方案1】：

暂时有一个解决方法，但它会被弃用，这里有详细信息

https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep

 :host ::ng-deep .mat-list-item-content {
  flex-direction: column !important;
}

【讨论】：

【解决方案2】：

编辑 -

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

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

【讨论】：

.icn_og 在这里打错了，抱歉
@ArgV 你有小提琴/截图或我能看到的东西来找出问题吗？
我添加了截图
还是不行 :( 但我加了一些代码来玩 :) 上面
@ArgV 这确实有帮助。我通过帖子中的更新更改解决了这个问题。我希望它对你有同样的效果。干杯！

【解决方案3】：

尝试像这样使用mat-icon 指令：

<mat-list>
    <a mat-list-item>
        <mat-icon></mat-icon>
        <span matLine>Centered Text</span>
    </a>
</mat-list>

在mat-icon 中，您可以使用https://material.io/tools/icons。如果您对材质图标不熟悉，可以按照以下指南操作：https://google.github.io/material-design-icons/。

【讨论】：

【解决方案4】：

试试：

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

【讨论】：

<center> 标签已从 HTML 中弃用，帖子的作者只想将第一个 span 居中。
什么是matLine？