为什么我的反应图标不能在按钮中居中？

Question

大家好，我正在尝试在 react.js 中创建滚动到顶部按钮，并且我已经设法完成了组件，但问题是我无法使图标垂直居中在圆形按钮上。我该如何解决？我试图将项目对齐到中心。是不是因为图标本身在顶部有某种填充？

这是我的代码：

  return (
        <button onClick={ScrollToTop} className="ButtonToTop" aria-hidden="true" style={{display: isVisible ? 'inline' : 'none'}}>
            <BiArrowToTop/>
        </button>
    )

我的css代码：

.ButtonToTop{
    align-items: center;
    position: fixed; 
    width: 50px;
    right: 10px;
    bottom: 40px;
    height: 50px;
    font-size: 33px;
    z-index: 1;
    cursor: pointer;
    background-color: #967A50;
    color: #10255A;
}

Answer 1

更新

您正在设置style={{ display: isVisible ? "inline" : "none" }} 这会将display 重置为inline。只需将其设置为 flex 并在下面添加 css（已更新）

style={{ display: isVisible ? "flex" : "none" }}

---

使用Flex 轻松将其对齐到中心

.ButtonToTop{
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed; 
    width: 50px;
    right: 10px;
    bottom: 40px;
    height: 50px;
    font-size: 33px;
    z-index: 1;
    cursor: pointer;
    background-color: #967A50;
    color: #10255A;
}