How do I place an Angular material button at a particular position?-CodePudding

I want to place the following button at the bottom-center of the mat-grid-tile, how can I do it?

.html file:

<mat-grid-list cols="1" rowHeight="400">
  <mat-grid-tile  >
    <div >
      <button mat-button (click)="getQuestions()" routerLink="questions/getAllQuestions" routerLinkActive="active"><strong>Show!</strong> </button>
    </div>
</mat-grid-tile>
  <mat-grid-tile>...</mat-grid-tile>
</mat-grid-list>

.css file:

.button{
  display: table-cell;
  width: 700px;
  color: rgb(0, 0, 0);

}

CodePudding user response：

I like to use flexbox utilities for these kinds of things. In your case, you need to first make sure you button div fills the full height/width of the grid tile. Then you can use flexbox to position the content inside the div.

.button {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

Here's a stackblitz demonstrating

CodePudding user response：

You could use a little bit of CSS Flexbox for that.

.button {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    align-content: flex-end;
}

Then your <button> will align to the bottom center of its container. Have a play around with Flexbox on this Playground to get better at it.