Question

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

在their docs中，他们提到：

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

常见的模式是在左侧放置标题，右侧有一些操作。这可以通过display：flex：
轻松完成

这就是我的尝试：

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

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

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

我尝试阅读有关flex的here，但无法弄清楚要做什么。

Answer 1

假设mat-toolbar有display: flex和row方向（通常是默认值），请在其父级justify-content: center上设置mat-toolbar或使用span margin: 0 auto上auto margin*，flex: 1 1 auto。

在这两种情况下，还需要删除span，因为这会使flex-grow填充其父级，因为其1具有flex（第一个）简写中的值.title-center { margin: 0 auto; }）

text-align: center

或者，如果要保留现有的CSS，还要向其添加span，就像通常情况下那样。将像div

这样的块元素中的内联元素（如

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

）居中

{{1}}

*借助Flexbox，自动边距获得了更新，https://www.w3.org/TR/css-flexbox-1/#auto-margins

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

1 个答案: