Блог

Главная - Вопросы по программированию - значок мата не центрируется в кнопке мата

значок мата не центрируется в кнопке мата

#css #angular

Вопрос:

Когда я увеличиваю шрифт, значок мата больше не центрируется. как я могу центрировать значок внутри кнопки по вертикали и горизонтали? (Обратите внимание,что класс «значок мата» встроен, поэтому css работает, указывая класс в элементе)

HTML:

 <button mat-fab class="add-picture">
    <mat-icon>add_to_photos</mat-icon>
</button>

CSS:

 .add-picture {
    width:100px;
    height:100px;
}

.mat-icon {
    font-size: 80px;
}

Комментарии:

1. Установите гибкое отображение, выровняйте центр содержимого и выровняйте центр элементов для добавления класса изображений

2. Установка дисплея на гибкий режим уже изменяет положение значка. Но что бы я ни делал, я не могу сосредоточиться на этом

Ответ №1:

Измените свой css следующим образом

 .mat-icon {
  font-size: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
}
// this is the parent span angular inserts for icon inside mat-fab
::ng-deep.mat-fab .mat-button-wrapper {
  display: flex !important;
  justify-content: center !important;
}

Вы можете проверить это здесь: https://stackblitz.com/edit/mat-icons-4az4rq?file=app/icon-overview-example.html

Метки: