【问题标题】：Material UI Select component's customized icon do not vertically centerMaterial UI Select 组件自定义图标不垂直居中
【发布时间】：2021-10-16 14:17:52
【问题描述】：
Here 是演示链接，现在下拉图标不是垂直居中的。似乎它为带有"tlm-dropdown-icon" 类的图标提供了额外的顶部填充。额外的空间导致图标不是垂直中心。我检查了该元素，但没有发现该元素的任何相关填充或边距。此外，我其实不明白为什么图标顶部有多余的空间。
top: 50%;
transform: translateY(-50%);
这些 CSS 似乎没有任何作用。
感谢您的帮助！
【问题讨论】：
标签：
css
reactjs
material-ui
【解决方案1】：
您将图标元素的extrinsic height 设置为一个较小的数字，导致它被溢出并向下推（至少这是我的假设）。修复方法是删除 height 或在您的自定义图标样式中将其设置为 auto，以便元素能够自行调整大小：
height: auto;
top: 50%;
transform: translateY(-50%);
你也可以使用 flex 并垂直对齐它：
height: 100%;
display: flex;
align-items: center;