Tips for aligning mat-card in the center using Angular Material

Question

Tips for aligning mat-card in the center using Angular Material

My login card, designed with Angular materials, seems to be sticking to the left side of the page when I view it.

I've tried using flex and layout-align="center center" but can't seem to get the card centered on the page.

What could I be doing wrong?

Here is the HTML code I am using:

<mat-card class="example-card" layout="row" layout-align="center center">
  <mat-card-header>
    <div class="login-box-header" layout="row" layout-align="center center">
        <img src="https://image.ibb.co/hDqa3p/codershood.png">
    </div>
  </mat-card-header>
  <mat-card-content>
    <form class="example-form">
      <table class="example-full-width" cellspacing="0">
        <tr>
          <td>
            <mat-form-field class="example-full-width">
            <input matInput placeholder="Username" [(ngModel)]="username" name="username" required>
            </mat-form-field>
          </td>
        </tr>
        <tr>
        <td><mat-form-field class="example-full-width">
          <input matInput placeholder="Password" [(ngModel)]="password"type="password" name="password" required>
        </mat-form-field></td>
      </tr></table>
    </form>
    <mat-spinner [style.display]="showSpinner ? 'block' : 'none'"></mat-spinner>
  </mat-card-content>
  <mat-card-actions>
    <button mat-raised-button (click)="login()" color="primary">Login</button>
  </mat-card-actions>
</mat-card>

However, the content still remains off-center:

https://i.sstatic.net/Q09Is.png

html css angular angular-material

Answer 1

Answer №1

Resolved the issue using a straightforward Flex solution

.main-div{
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

and encapsulating everything with a specific class

<!-- Adding classes main-div and example-card in the .css file -->
<div class="main-div">

<mat-card class="example-card">
  <mat-card-header>
    <div class="login-box-header">
        <!-- Temporary image hosted on image.ibb-->
        <img src="https://image.ibb.co/hDqa3p/codershood.png">
    </div>
  </mat-card-header>
  <mat-card-content>
    <form class="example-form">
      <table class="example-full-width" cellspacing="0">
        <tr>
          <td>
            <mat-form-field class="example-full-width">
            <input matInput placeholder="Username" [(ngModel)]="username" name="username" required>
            </mat-form-field>
          </td>
        </tr>
        <tr>
        <td><mat-form-field class="example-full-width">
          <input matInput placeholder="Password" [(ngModel)]="password"type="password" name="password" required>
        </mat-form-field></td>
      </tr></table>
    </form>
    <mat-spinner [style.display]="showSpinner ? 'block' : 'none'"></mat-spinner>
  </mat-card-content>
  <mat-card-actions>
    <button mat-raised-button (click)="login()" color="primary">Login</button>
  </mat-card-actions>
</mat-card>

Answer 2

Resolved the issue using a straightforward Flex solution

.main-div{
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

and encapsulating everything with a specific class

<!-- Adding classes main-div and example-card in the .css file -->
<div class="main-div">

<mat-card class="example-card">
  <mat-card-header>
    <div class="login-box-header">
        <!-- Temporary image hosted on image.ibb-->
        <img src="https://image.ibb.co/hDqa3p/codershood.png">
    </div>
  </mat-card-header>
  <mat-card-content>
    <form class="example-form">
      <table class="example-full-width" cellspacing="0">
        <tr>
          <td>
            <mat-form-field class="example-full-width">
            <input matInput placeholder="Username" [(ngModel)]="username" name="username" required>
            </mat-form-field>
          </td>
        </tr>
        <tr>
        <td><mat-form-field class="example-full-width">
          <input matInput placeholder="Password" [(ngModel)]="password"type="password" name="password" required>
        </mat-form-field></td>
      </tr></table>
    </form>
    <mat-spinner [style.display]="showSpinner ? 'block' : 'none'"></mat-spinner>
  </mat-card-content>
  <mat-card-actions>
    <button mat-raised-button (click)="login()" color="primary">Login</button>
  </mat-card-actions>
</mat-card>

Answer 3

Answer №2

Consider the following CSS methods:

The first approach is to use the following code:

.example-card{
    display:inline-block;
}

Next, create a cover div for "mat-card" with a class name of "mat-card-cvr".

.mat-card-cvr{
   width: 100%;
   text-align:center;
}

2. The second method involves using the following style rules:

.example-card{
    margin: 0 auto;
    width: 40%;
}

The third approach requires the following CSS code:

.example-card{
    margin: 0 auto;
    width: 40%;
    display: inline-block;
    vertical-align: middle;
}

After that, create a cover div for "mat-card" with the class name "mat-card-cvr".

.mat-card-cvr{
    width: 100%;
    height: 500px;
    line-height: 500px;
    text-align: center;
}

Finally, the fourth method involves the following styles:

.mat-card-cvr{
    top:50%;
    width:100%;
    text-align:center;
    position:fixed;
}
    
.example-card{
    margin:0 auto;
    display:inline-block;
}

Answer 4

Consider the following CSS methods:

The first approach is to use the following code:

.example-card{
    display:inline-block;
}

Next, create a cover div for "mat-card" with a class name of "mat-card-cvr".

.mat-card-cvr{
   width: 100%;
   text-align:center;
}

2. The second method involves using the following style rules:

.example-card{
    margin: 0 auto;
    width: 40%;
}

The third approach requires the following CSS code:

.example-card{
    margin: 0 auto;
    width: 40%;
    display: inline-block;
    vertical-align: middle;
}

After that, create a cover div for "mat-card" with the class name "mat-card-cvr".

.mat-card-cvr{
    width: 100%;
    height: 500px;
    line-height: 500px;
    text-align: center;
}

Finally, the fourth method involves the following styles:

.mat-card-cvr{
    top:50%;
    width:100%;
    text-align:center;
    position:fixed;
}
    
.example-card{
    margin:0 auto;
    display:inline-block;
}

Answer 5

Answer №3

To easily organize rows and columns, utilize the provided mat-grid-list material. Implement it in your code like this:

<mat-grid-list cols="1" rows="1" rowHeight="2:1">
    <mat-grid-tile>
        <mat-card>
        Insert your form content here
        </mat-card>
    </mat-grid-tile>
</mat-grid-list>

For further details, refer to the documentation https://material.angular.io/components/grid-list/overview

Answer 6

To easily organize rows and columns, utilize the provided mat-grid-list material. Implement it in your code like this:

<mat-grid-list cols="1" rows="1" rowHeight="2:1">
    <mat-grid-tile>
        <mat-card>
        Insert your form content here
        </mat-card>
    </mat-grid-tile>
</mat-grid-list>

For further details, refer to the documentation https://material.angular.io/components/grid-list/overview

Answer 7

Answer №4

Witness the magic:

.logo-center{
   margin: 20px auto;
   display: block;
}

Answer 8

Witness the magic:

.logo-center{
   margin: 20px auto;
   display: block;
}

Answer 9

Answer №5

I attempted the solution suggested by OP, but I also needed to manage the width, so I ended up using nested div elements along with a mat-card component.

.centering-div{
  display: flex;
  justify-content: center;
}

.inner-container {
  width: 80%;
  max-width: 100%;
  overflow: auto;
}
.my-card {
  max-width: 100%;
  color: rgb(63, 81, 181);
}

Answer 10

I attempted the solution suggested by OP, but I also needed to manage the width, so I ended up using nested div elements along with a mat-card component.

.centering-div{
  display: flex;
  justify-content: center;
}

.inner-container {
  width: 80%;
  max-width: 100%;
  overflow: auto;
}
.my-card {
  max-width: 100%;
  color: rgb(63, 81, 181);
}

Tips for aligning mat-card in the center using Angular Material

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Utilizing long polling to retrieve information from the database and present it on the webpage

How to create a full-page background image using Bootstrap?

What is the best way to transfer array information from an ASP.NET page to JavaScript code?

The data from the Subscribe API call is gradually loading within the ngOnInit() function

Angular ng2-chart: Donut chart [plugins] is not a recognized property of 'canvas' TEXT CENTER

Retrieve the dimensions of an image once rendering is complete, using Angular

Responsive image gallery using css grid

Creating a treeview that loads data on demand: A step-by-step guide

Updating a subscribed observable does not occur when pushing or nexting a value from an observable subject

Understanding the res.render method in JavaScript can be a bit tricky at first

Move the cursor over the text to reveal an image

To create a complete layout without relying on fixed positioning, ensure that the header, container, and footer collectively

Maintain the same javascript variable throughout multiple pages

Incorporating a slider into an HTML website

html table layout disrupted due to immovable column

A visual element positioned centrally within a row, directly beneath a paragraph tag

What is the best way to determine the quantity of identical items in the django templating language?

The <hr> line in Bootstrap is placed in a peculiar manner

Conceal the Button when the TextBox does not contain valid input

Failing Cypress component test: When leveraging an index.ts file for importing and exporting services