#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;