web-dev-qa-db-ja.com

整列方法Angular Material 5ツールバーのFlexでのタイトルセンター

Angular 5プロジェクトにAngularマテリアルを使用しています。ツールバーのタイトルを中央に揃えたいのですが。

their docs では、彼らは言及しています：

ツールバーは、コンテンツの配置を実行しません。これにより、ユーザーはアプリケーションに合わせてコンテンツを配置できます。

一般的なパターンは、タイトルを左側に配置し、いくつかのアクションを右側に配置することです。これはディスプレイで簡単に実現できます：flex：

これは私が試したものです：

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

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

...しかし、タイトルはまだ左です。

こちら flexについて読んでみましたが、どうしたらいいかわかりませんでした。

cssangularcss3flexboxangular-material2
6
Alisson

mat-toolbarはdisplay: flexおよびrow方向（通常はデフォルト）、justify-content: centerその親、mat-toolbar、またはspanで auto margin * を使用して、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

26
LGSon