md-toolbarのmd-toolbar-row要素をターゲットにする方法

Question

justify-content:centerをツールバーのコンテンツの中央に配置しようとしています。ツールバーをターゲットにすると、展開された要素が表示され、そのうちの1つはmd-toolbar-rowで、justify-content:centerにコンテンツを配置します（デベロッパーツールを使用してデバッグしている間のみ）。ここで

はplunkerです：https://plnkr.co/edit/qh3Kqi9GDXIL4H1HTzFu?p=preview

はどうやってコンテンツを中央にしますか？

は以下しようとしましたが、どれも助けなかっ：

md-toolbar-row{ 
justify-content:center; 
} 

.mat-toolbar-row{ 
justify-content:center; 
} 

.mat-toolbar .mat-toolbar-row{ 
justify-content:center; 
} 

Answer 1

あなただけのこのツールバーのコンテンツを中心にしたい場合は、example-spacerクラスを使用します。クラス内で次の変更を加えて、<div>タグの前に追加します。

Plnkr demo

CSS：

.example-spacer { 
    flex: .5 1 auto; 
} 

HTML：

<md-toolbar color="primary"> 
    <span class="example-spacer"></span> 
    <div>Custom Toolbar</div> 
</md-toolbar> 

Answer 2

フレックス方向が列あなたはそれ

水平方向の中心に align-items: centerを使用する必要がありますされたよう

Updated Plnkr

---

オプションでは、フレックス方向を変え、justify-content: center;

単一のツールバーのためのグッド

md-toolbar { 
    flex-direction: row; 
    justify-content: center; 
} 

Updated Plnkr 2