Discussion :

[flamant]

Je développe une application angular material. J'ai un composant dont le template est "app.component.html"

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
 
<mat-toolbar color="primary">
  <div class="md-toolbar-tools" style="display: inline-block">
    Liste des annonces
    <span flex></span>
  </div>
</mat-toolbar>>
..........
..........

dans "app.component.css", j'essaye d'appliquer ces styles :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
mat-card {
  max-width: 80%;
  margin: 2em auto;
  text-align: center;
}
 
mat-toolbar div {
    text-align: center;
}
.md-toolbar-tools {
    text-align: center;
}
 
mat-toolbar-row {
  justify-content: space-between;
}

Mais le texte "Liste des annonces" n'est pas centré. Pouvez vous m'aider ? Merci

[Invité]

Bonjour,

Enlève :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

 style="display: inline-block"

[flamant]

Bonjour jreaux62 et merci pour ta réponse.

j'ai enlevé style="display: inline-block" mais ça n'a rien changé

[flamant]

Bonjour jreaux62,
désolé pour le display:inline-block qui n'avait rien à faire. J'ai résolu mon problème comme ça (width:100%)

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<mat-toolbar color="primary">
  <div style="width:100%" class="md-toolbar-tools">
    Liste des annonces
    <span flex></span>
  </div>
</mat-toolbar>

et ça marche. Merci.