时间戳

首页 > 解决方案 > 如何对齐文本在角度

css - 如何对齐文本在角度

问题描述

<mat-toolbar color="primary">
  <mat-toolbar-row>
    <span class="toolbar">Welcome to Conflux Application</span>
  </mat-toolbar-row>
</mat-toolbar>

span {
  text-align: center;
}

以上是工具栏的以下视图/模板和设计，但是文本“欢迎使用 Conflux 应用程序”甚至没有居中对齐？

标签： cssangulartypescriptangular-material

解决方案

在您的情况下，首先您需要将 span 的宽度设置为 100%，以便其中的文本可以有空间居中。

由于 span 是一个内联元素，所以我们需要使用 display: inline 块属性，以便我们可以设置上面的 width 属性。

所需更改：

span {
  text-align: center;
  display: inline-block;
  width: 100%;
}

工作示例 URL - https://stackblitz.com/edit/angular-5ptsm7

推荐阅读