why my react-icon cannot be centered in the button?

Question

Hi guys so I'm trying to create scroll to Top button in react.js and I have manage to finished the component but the problem is I can't make the icon vertically center on the circle button. How can I fix it ? I've tried to align the item to center. Is it because the Icon itself have some kind of padding on top ?

Here's my code:

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

My css code:

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

Imanpal Singh · Answer 1 · 2021-10-11T05:25:30.683

0

Update

You are setting style={{ display: isVisible ? "inline" : "none" }} which resets the display to inline. Just set it to flex and add the css below (updated)

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

Use Flex to easily align it to center

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

edited Oct 11 '21 at 05:25

answered Oct 11 '21 at 04:53

Imanpal Singh

1,105
1
12
22

Hi thankyou for the reply, but it didn't work for me. Any other way ? – Kim San Oct 11 '21 at 05:01
Can you put this code in codesandbox? It will be easier to debug. – Imanpal Singh Oct 11 '21 at 05:05
Here you go https://codesandbox.io/s/practical-leftpad-uwjdw?file=/src/App.js – Kim San Oct 11 '21 at 05:14
@KimSan Check the updated answer – Imanpal Singh Oct 11 '21 at 05:25
sorry but nothing change – Kim San Oct 11 '21 at 05:33
Are you sure? because it is working for me, sandbox link below – Imanpal Singh Oct 11 '21 at 05:36
https://codesandbox.io/s/determined-wave-zwm5n?file=/src/ScrollUp.css – Imanpal Singh Oct 11 '21 at 05:37
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/238011/discussion-between-kim-san-and-imanpal-singh). – Kim San Oct 11 '21 at 06:28

why my react-icon cannot be centered in the button?

1 Answers1

Update