web-dev-qa-db-fra.com

matériau angulaire 2 alignement de centre d'en-tête de table

Si md-sort-header est ajouté à md-header-cell dans md-table, il est toujours aligné à gauche. Comment centrer les cellules d'en-tête, telles que "nom"?

<md-header-cell *cdkHeaderCellDef md-sort-header style="text-align:center"> Name </md-header-cell>

plnkr

angularangular-material2
17
Yong

Mise à jour pour le matériau angulaire 5.x.x, pas besoin de ng-deep:

  mat-header-cell {
   display:flex;
   justify-content:flex-end;
  }

DEMO

md-header-cell get 'traduit' dans un conteneur avec class = "mat-sort-header-container". En utilisant cela, vous définissez son style avec ng-deep . Utilisez flexbox pour centrer son contenu. Placez les éléments suivants dans la feuille de style des composants:

::ng-deep .mat-sort-header-container {
  display:flex;
  justify-content:center;
}

DEMO

26
Vega

La réponse acceptée est correcte. Cependant, ::ng-deep est amorti et éventuellement abandonné ( documentation officielle ). 

Le combinateur descendant perçant les ombres est obsolète et le support est être retiré des principaux navigateurs et outils. En tant que tel, nous prévoyons de laisser tomber support en angulaire (pour les 3 valeurs de/deep /, >>> et :: ng-deep). Jusqu'à ce que then: ng-deep devrait être préféré pour une compatibilité plus large avec les outils.

La bonne façon consiste à utiliser ViewEncapsulation . Dans votre composant.ts, ajoutez ce qui suit: 

import { ViewEncapsulation } from '@angular/core';

@Component({
    ....
    encapsulation: ViewEncapsulation.None
})

et remplacez la classe dans votre fichier composant.css: 

.mat-sort-header-container {
  display:flex;
  justify-content:center;
}
6
Faisal
.mat-header-cell {    text-align: center;    }
2
dayderluv

Je pense que les solutions données au problème sont trop strictes dans leur approche. J'avais un problème similaire dans lequel je devais modifier certaines propriétés CSS de mat-sort-header-container, mais de manière dynamique.

J'ai fait quelque chose qui ressemble à la réponse de Vega, mais très différente de la manière dont les styles sont choisis:

::ng-deep .mat-sort-header-container{
    justify-content: inherit;
    /* other inheritable properties */
}

ce qui ouvre certaines propriétés pour que son parent ait le style mat-header-cell qui se trouve dans votre code html. Quel que soit le style que vous fournissez dans mat-header-cell et dans le ng-deep qui hérite de son parent, seuls ces styles et aucun autre que celui-là ne descendraient dans cette hiérarchie.

0
Aakash Uniyal