web-dev-qa-db-fra.com

Comment aligner Angular Material 5 Toolbar title center with Flex

J'utilise Angular Material for my Angular 5 project. Je voudrais aligner le titre de la barre d'outils au centre).

Dans leurs documents , ils mentionnent:

La barre d'outils n'effectue aucun positionnement de son contenu. Cela donne à l'utilisateur le pouvoir de positionner le contenu en fonction de son application.

Un schéma courant consiste à positionner un titre à gauche avec quelques actions à droite. Cela peut être facilement accompli avec display: flex:

Voici ce que j'ai essayé:

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

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

... mais le titre est toujours à gauche.

J'ai essayé de lire ici sur flex, mais je n'ai pas réussi à savoir quoi faire.

cssangularcss3flexboxangular-material2
6
Alisson

En supposant que le mat-toolbar a display: flex et row direction (qui est normalement la valeur par défaut), définissez justify-content: center sur son parent, le mat-toolbar, ou utilisez marge automatique * sur le span, en lui donnant margin: 0 auto.

Dans les deux cas, il faut également supprimer flex: 1 1 auto, car cela fera que le span remplira son parent, puisque son flex-grow a 1 (la première valeur de la sténographie flex) 

.title-center {
  margin: 0 auto;
}

Ou, si vous souhaitez conserver le CSS existant, ajoutez également text-align: center, comme on le fait normalement, par exemple centrer un élément en ligne comme un span dans un élément de bloc comme un div

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

* Avec Flexbox, les marges automatiques ont une mise à jour, https://www.w3.org/TR/css-flexbox-1/#auto-margins

26
LGSon