Не могу центрировать SVG в моем элементе панели навигации. ⇐ CSS

[Anonymous]

Я пытаюсь создать боковую панель навигации и не могу центрировать значок svg из начальной загрузки, но не могу. Я пробовал несколько вещей и проверял другие вопросы, но просто не могу заставить его работать. Есть идеи, почему это не работает? Извините, если ответ очевиден, у меня не так много опыта в React.js

Вот код Приложение.js

import './App.css'; импортировать NavBar из «./navbar.js» функция Приложение() { возвращаться ( ) } экспортировать приложение по умолчанию; navbar.js

импортировать React из «реагировать»; импортировать './navbar.css'; функция NavBar() { возвращаться ( Главная Языки Руководства Сообщество О программе Контакт ); } экспортировать NavBar по умолчанию; navbar.css
.navbar { ширина: 5рем; /* Отрегулируйте ширину по своему усмотрению */ высота: 100%; /* Сделать панель навигации на всю высоту области просмотра */ положение: фиксированное; верх: 0; слева: 0; цвет фона: #F5F5F5; /* Цвет фона навигационной панели */ черный цвет; отступ: 10 пикселей; дисплей: гибкий; гибкое направление: столбец; /* Отображение ссылок вертикально */ box-shadow: inset 0 0 10px 2px rgba(0, 0, 0, 0.08); оправдание-содержание: пространство между; переполнение-у: авто; } .navbar а { текстовое оформление: нет; черный цвет; отступ: 10 пикселей; размер шрифта: маленький; вертикальное выравнивание: по центру; } .navbar a:hover { цвет фона: #8a8a8a; /* Цвет фона при наведении курсора на ссылку */ } .button-svg { дисплей: встроенный гибкий; /* Сделать SVG элементом встроенного блока */ выровнять-элементы: по центру; /* Вертикально центрируем SVG по высоте строки текста */ поле справа: 5 пикселей; /* Добавляем поле между SVG и текстом */ }