Search code examples
cssangularflexboxangular-materialangular-material-table

Angular Material align cell contents without CSS Flex? Flex mis-aligns cells horizontally on row no matter what

In my table there's a column with buttons inside, due to that it looks very misaligned so I decided to align the header JUST for that column in the middle - no problem. And now I'm trying to align the rest of the column.

The problem is, using CSS Flex works but completely misaligns the cells horizontally, like this: Link.

The code for aligning the column cells is simple:

#transmittalContent.mat-cell {
  display: flex;
  justify-content: center!important;
}

I've tried every other way of aligning that and it simply does not work.

Also tried it via angular flex layout but that's just ending up as CSS Flex in the end.

Solution

  • Have you tried aligning the button inside the cell instead of the cell itself using flex and justify-content?