Поместить коврик-иконку прямо в центр div с помощью flex? - PullRequest
Новая
       2

Поместить коврик-иконку прямо в центр div с помощью flex?

0 голосов
/ 06 октября 2019

Попытка поместить Угол mat-icon прямо в центр содержащего div: 

<div style="background-color: yellow;
            display: flex; 
            flex-direction: column;
            width: 100px;
            height: 120px; 
            align-items:center; 
            justify-content: center; ">
    <mat-icon style="font-size: 60px;">
    account_circle
    </mat-icon>
</div>

Он не центрируется. Это демонстрация стекаблиц .

Я заметил, что при отображении контура mat-icon с инструментами разработчика он показывает, что фактические размеры элемента находятся прямо посередине, но содержимое этого элемента выходит за его границы, поэтомузначок появляется не по центру.

Мысли о том, как это исправить?

1 Ответ

1 голос
/ 06 октября 2019

Установите для свойства height и width значение mat-icon. Это будет работать 

   <mat-icon style="font-size: 60px;height:60px;width:60px;">
    account_circle
    </mat-icon>


По умолчанию высота и ширина значка mat равна 24px;enter image description here

Попробуйте этот код: 

<div style="background-color:yellow;
            display: flex; 
            width: 100px;
            height: 120px; 
            align-items:center; 
            justify-content: center; ">
    <mat-icon style="font-size: 60px;height:60px;width:60px;">
    account_circle
    </mat-icon>
</div>
...