如何将角度材质5工具栏标题中心与Flex对齐

Question

我正在为Angular 5项目使用Angular Material.我想将工具栏标题与中心对齐.

工具栏不会对其内容执行任何定位.这使用户有足够的能力来定位符合其应用的内容.

一种常见的模式是在左侧放置标题,在右侧放置一些操作.这可以通过display:flex来轻松完成:

这是我试过的:

<mat-toolbar color="primary">
    <span class="title-center">TITLE</span>
</mat-toolbar>

.title-center {
  flex: 1 1 auto;
}

......但标题仍然在左边.

我试着在这里阅读有关flex的内容,但无法弄清楚要做什么.

Answer 1

假设mat-toolbar具有display: flex与row方向(这通常是默认值),设置justify-content: center在其亲本的mat-toolbar,或者使用自动余量*上span,给它margin: 0 auto.

在这两种情况下,还需要删除flex: 1 1 auto,因为它会使span填充成为其父级,因为它flex-grow具有1(缩写中的第一个值flex)

.title-center {
  margin: 0 auto;
}

或者,如果要保留现有的CSS,也要添加text-align: center到它,就像通常所做的那样,例如将内联元素作为像span块中的块元素一样居中div

.title-center {
  flex: 1 1 auto;
  text-align: center;
}

*随着Flexbox自动边距获得更新,https: //www.w3.org/TR/css-flexbox-1/#auto-margins