How to center the text within an Angular Material Button?

user_8891889 0
Viewed 2063

I have an angular material button:

<a mat-raised-button class="buttons-class" color="accent">Hello!</a>

And I have increased its size:

.buttons-class {
  height: 60px !important;
  width: 210px !important;
  align-items: center;
}

Now, I wish to center the text (Hello!) within it. Currently the text is offset like this:

enter image description here

Putting the text in a span or div and using the standard centering techniques didn't work.

angular-material angular css
2 Answers

you can use ng-deep ::ng-deep shadow-piercing descendant combinator to force a style down through the child component tree into all the child component views and styling any class

::ng-deep.buttons-class {
  height: 60px !important;
  width: 210px !important;
  display: flex;
  align-items: center;
  justify-content: center;
}
user_93385520

Add the following styles please.

.buttons-class {
  height: 60px !important;
  width: 210px !important;
  display: flex;
  align-items: center;
  justify-content: center;
}
user_160481610
Related