Пользовательский интерфейс материала Выберите настраиваемый значок компонента не по центру по вертикали

#css #reactjs #material-ui

Вопрос:

Вот демонстрационная ссылка, прямо сейчас значок раскрывающегося списка не расположен вертикально по центру. Похоже, что у него есть дополнительное верхнее заполнение для значка с классом "tlm-dropdown-icon" . Это дополнительное пространство приводит к тому, что значок не находится в вертикальном центре. Я осматриваю элемент, но не нахожу никакого связанного заполнения или поля для элемента. Кроме того, я на самом деле не понимаю, почему у значка есть дополнительное место сверху.

 top: 50%;
transform: translateY(-50%);
 

эти CSSseems не выполняют никакой работы.
Спасибо за помощь!

Ответ №1:

Вы устанавливаете внешнюю высоту элемента значка на небольшое число, в результате чего он переполняется и опускается (по крайней мере, это мое предположение). Исправление состоит в том, чтобы удалить height или установить его auto в ваших пользовательских стилях значков, чтобы элемент мог изменять свой размер:

 height: auto;
top: 50%;
transform: translateY(-50%);
 

Вы также можете использовать гибкий и выровнять его по вертикали:

 height: 100%;
display: flex;
align-items: center;