Как центрировать текст внутри панели инструментов, используя гибкий макет?

Question

Мне нужно создать нижний колонтитул с 2 простыми строками: название компании и год. Вот мой фрагмент HTML,

<mat-toolbar color="primary" style="height: 176px">
  <span>Company name</span>
  <span>Copyright ©2019</span>
</mat-toolbar>

Таким образом, название компании должно быть в центре (по вертикали и по горизонтали), а авторское право должно быть ниже названия компании.

Answer 1

Просто поместите spans в mat-toolbar-row. Они в основном сделаны для структурирования контента в строках.

<mat-toolbar>
    <mat-toolbar-row>
        <span class="span">First Line</span>
    </mat-toolbar-row>
    <mat-toolbar-row>
        <span class="span">Second Line</span>
    </mat-toolbar-row>
</mat-toolbar>

Тогда вам просто нужно центрировать spans.

.span {
    margin: auto;
}