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

Posted 2023-03-23

【中文标题】为啥我的反应图标不能在按钮中居中？

【英文标题】：why my react-icon cannot be centered in the button?为什么我的反应图标不能在按钮中居中？

【发布时间】：2021-11-29 21:42:00

【问题描述】：

大家好，我正在尝试在 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;

【参考方案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;

【讨论】：

您好，谢谢您的回复，但它对我不起作用。还有什么办法吗？

你能把这段代码放到codesandbox里吗？会更容易调试。

给你codesandbox.io/s/practical-leftpad-uwjdw?file=/src/App.js

@KimSan 检查更新的答案

抱歉，没有任何改变