CODEWITHSUNDEEP
cssangularangular-material
Atharva Shukla
Atharva Shukla

Reputation: 2137

How to center the text within an Angular Material Button?

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.

Upvotes: 2

Views: 7676

Answers (2)

Rey
Rey

Reputation: 51

Add the following styles please.

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

Upvotes: 1

Ali Shoghian
Ali Shoghian

Reputation: 19

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;
}

Upvotes: 1

Related Questions