无法将 svg 放在我的导航栏元素中

Question

我正在尝试制作一个横向导航栏，但无法将引导程序中的 svg 图标居中，但不能，我尝试了多种方法并检查了其他问题，但根本无法使其工作。知道为什么这不起作用吗？如果答案很明显，我很抱歉，我在 React.js 方面没有那么丰富的经验

这是代码 应用程序.js

import './App.css';
import NavBar from './navbar.js'

function App() {
  return (
    <div className="NavBar">
      <NavBar />
    </div>
  )
}

export default App;

navbar.js

import React from 'react';
import './navbar.css';



function NavBar() {
  return (
    <div className="navbar">
        <a href="/" className="navbar-button">Home</a>
        <a href="/create-language" className="navbar-button">Languages</a>
        <a href="/tutorials" className="navbar-button">Tutorials</a>
        <a href="/community" className="navbar-button">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" className="bi bi-archive button-svg" viewBox="0 0 16 16">
                <path d="M0 2a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1v7.5a2.5 2.5 0 0 1-2.5 2.5h-9A2.5 2.5 0 0 1 1 12.5V5a1 1 0 0 1-1-1V2zm2 3v7.5A1.5 1.5 0 0 0 3.5 14h9a1.5 1.5 0 0 0 1.5-1.5V5H2zm13-3H1v2h14V2zM5 7.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5z"/>
            </svg>
            Community
        </a>
        <a href="/about" className="navbar-button">About</a>
        <a href="/contact" className="navbar-button">Contact</a>
    </div>
  );
}

export default NavBar;

导航栏.css

.navbar {
    width: 5rem; /* Adjust the width to your preference */
    height: 100%; /* Make the navbar the full height of the viewport */
    position: fixed;
    top: 0;
    left: 0;
    background-color: #F5F5F5; /* Background color of the navbar */
    color: black;
    padding: 10px;
    display: flex;
    flex-direction: column; /* Display the links vertically */
    box-shadow: inset 0 0 10px 2px rgba(0, 0, 0, 0.08);
    justify-content: space-between;
    overflow-y: auto;

  }
  
  .navbar a {
    text-decoration: none;
    color: black;
    padding: 10px;
    font-size: small;
    vertical-align: center;
    
  }
  
  .navbar a:hover {
    background-color: #8a8a8a; /* Background color when hovering over links */
  }

  .button-svg {
    display: inline-flex; /* Make the SVG an inline-block element */
    align-items: center; /* Vertically center the SVG within the line height of the text */
    margin-right: 5px; /* Add margin between the SVG and text */
  }
  

Answer 1

我将 svg 放入一个 div 中，并向该 div 添加了 flex 样式，这样我就可以将它放在中心。

navbar.js

  <a href="/community" className="navbar-button">
    <div className="svg-container">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="24"
        height="24"
        fill="currentColor"
        className="bi bi-archive button-svg"
        viewBox="0 0 16 16"
      >
        <path d="M0 2a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1v7.5a2.5 2.5 0 0 1-2.5 2.5h-9A2.5 2.5 0 0 1 1 12.5V5a1 1 0 0 1-1-1V2zm2 3v7.5A1.5 1.5 0 0 0 3.5 14h9a1.5 1.5 0 0 0 1.5-1.5V5H2zm13-3H1v2h14V2zM5 7.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5z" />
      </svg>
    </div>
    Community
  </a>

导航栏.css

.svg-container {
  display: flex;
  flex-direction: row;
  justify-content: center;
}