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

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