Angular - 如何将内容对齐到卡片的中心

Question

<mat-card id="card">
<mat-card-title>
    login
</mat-card-title>

<mat-card-content>
    
    <mat-form-field>
        <input matInput placeholder="email">
    </mat-form-field><br/>

    <mat-form-field>
        <input matInput placeholder="password">
    </mat-form-field><br/>
        <button mat-raised-button color="primary" style="margin-right:5px;">login</button>
        <button mat-raised-button color="primary" style="margin-right:5px;">register</button>  

</mat-card-content>

我尝试了这个：

display: block;
margin: auto;

我的代码现在无法正常工作，希望能得到帮助。我对Angular的样式还不太熟悉。

图片

- pat mat

---

如果它能正常工作，问题在哪里？ - Chellappan வ

可能是Flexbox：水平垂直居中的重复问题。 - Baruch

Answer 1

只需使用这个案例。

mat-card {text-align: center}

如果您想将标题设置为左对齐，则也可以使用以下代码。

mat-card-title { text-align: left }

- Piyush Jain

Answer 2

使用 style="text-align: center;"

我在Stackblitz上创建了一个演示。

<mat-card id="card" style="text-align: center;"><mat-card>

- Krishna Rathore

Answer 3

使用@angular/flex-layout，可以通过以下方式实现：fxLayout="row"（或column）和fxLayoutAlign="center"属性：

<mat-card fxLayout="column" fxLayoutAlign="center">
  // Your content here  
</mat-card>

- H S W