Не удалось выровнять текстовое содержимое по центру содержимого карты по центру с помощью Flex-макета - PullRequest
Новая
       37

Не удалось выровнять текстовое содержимое по центру содержимого карты по центру с помощью Flex-макета

0 голосов
/ 22 декабря 2018

В настоящее время я работаю над макетом, в котором не могу выровнять по центру (justify-content : center).Я использую Angular Flex Layout и материал.Я что-то упускаю или неправильно понял 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)

Ответы [ 2 ]

0 голосов
/ 22 декабря 2018

Flexbox делает ваши различные разделы по центру.Если вы также хотите, чтобы текст центрировался, вы можете сделать это с помощью CSS. 

p { 
    text-align: center; 
}
0 голосов
/ 22 декабря 2018

Работает так, как вы ожидаете: 

<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>
...