Блог

Главная - Вопросы по программированию - почему мой значок реакции не может быть расположен по центру кнопки?

почему мой значок реакции не может быть расположен по центру кнопки?

#css #reactjs #react-icons

Вопрос:

Привет, ребята, поэтому я пытаюсь создать кнопку прокрутки вверх в 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;
}

Комментарии:

1. Привет, спасибо за ответ, но у меня это не сработало. Как-нибудь по-другому ?

2. Можете ли вы поместить этот код в codesandbox? Это будет проще отлаживать.

3. Вот, пожалуйста codesandbox.io/s/practical-leftpad-uwjdw?file=/src/App.js

4. @KimSan Проверьте обновленный ответ

5. извините, но ничего не изменилось

Метки: