无法使用 Flex-layout 将 mat-card-content 中的文本内容居中对齐

Question

我目前正在处理无法居中对齐的布局 (justify-content : center)。我正在使用 Angular flex 布局和材质。 我是否遗漏了什么或者我误解了 flex-layout？

<mat-card class="example-card mat-elevation-z" fxLayout="row wrap" fxLayoutAlign="center">
      <mat-card-header>
        <mat-card-title>
            <h1 fxFlex fxFlex="100" fxFlexAlign="center">ALOE VERA For Pure <span class="title-line"></span></h1>
        </mat-card-title>
      </mat-card-header>
      <mat-card-content fxLayout="row wrap" fxLayoutAlign="center">
        <p fxFlex fxFlex="100" fxLayoutAlign="center">Aloe Vera is very famous for its herbal products. more than three thousand five hundred years, people have recognized the healing and moisturizing properties of the aloe vera plant. Aloe Vera is well known for its soothing and calming effects and as such is a great ingredient for use in our skin care products. Aloe’s beneficial properties, result in it being ideally suited for use in skin care products to soothe and calm sensitive, delicate and dry skin; Aloe enhances natural cell renewal, improving texture and elasticity so the skin is firmer, more supple and luminous. It also nourishes and protects the scalp maintaining healthy hair.</p>
        <p fxFlex fxFlex="100" fxLayoutAlign="center">Natural Health Products supplies raw and bulk material of Aloe Vera plant extract used in the cosmetic, complementary medicinal, and food and beverage industries. It also supplies finished Aloe Vera products for distribution. With over 150 nutritional ingredients, Aloe Vera is one of the most powerful medicinal plants in use today and it has a variety of applications. In 1959, the FDA (Food and Drug Administration) admitted that aloe-based products had regenerative properties on tissue.</p>
        <p fxFlex fxFlex="100" fxLayoutAlign="center">That year represented a major breakthrough in the future implementation of products based on aloe vera. As a result, for more than 30 years, the aloe vera industry has experienced a non-stop growth.</p>
      </mat-card-content>
    </mat-card>

查看附图以供参考，我希望描述居中对齐。 !(https://photos.app.goo.gl/MCTYBzd1fWYwHiKw5)

Answer 1

Flexbox 使您的不同部分居中。如果您还希望文本居中，您可以使用 CSS。

p { 
    text-align: center; 
}

Answer 2

它的工作如你所愿：

<mat-card fxLayout="row wrap" fxLayoutAlign="space-around center">
  <mat-card-header>
    <mat-card-title>
      <h1 fxFlex="100" fxLayoutAlign="space-around center">ALOE VERA For Pure <span class="title-line"></span></h1>
    </mat-card-title>
  </mat-card-header>
  <mat-card-content fxLayout="row wrap" fxLayoutAlign="space-around center" fxFlex="80">
    <p>Aloe Vera is very famous for its herbal products. more than three thousand five hundred years, people have recognized the healing and moisturizing properties of the aloe vera plant. Aloe Vera is well known for its soothing and calming effects and as such is a great ingredient for use in our skin care products. Aloe’s beneficial properties, result in it being ideally suited for use in skin care products to soothe and calm sensitive, delicate and dry skin; Aloe enhances natural cell renewal, improving texture and elasticity so the skin is firmer, more supple and luminous. It also nourishes and protects the scalp maintaining healthy hair.</p>
    <p>Natural Health Products supplies raw and bulk material of Aloe Vera plant extract used in the cosmetic, complementary medicinal, and food and beverage industries. It also supplies finished Aloe Vera products for distribution. With over 150 nutritional ingredients, Aloe Vera is one of the most powerful medicinal plants in use today and it has a variety of applications. In 1959, the FDA (Food and Drug Administration) admitted that aloe-based products had regenerative properties on tissue.</p>
    <p>That year represented a major breakthrough in the future implementation of products based on aloe vera. As a result, for more than 30 years, the aloe vera industry has experienced a non-stop growth.</p>
  </mat-card-content>
</mat-card>