React侧边导航栏中Bootstrap SVG图标无法居中问题求助

安全阿岳

2026-7-7

侧边导航栏中Bootstrap SVG图标居中问题解决

问题描述

正在制作一个侧边导航栏，无法将Bootstrap的SVG图标居中，尝试了多种方法并参考了其他相关问题，但始终无法解决。本人React.js经验不足，恳请帮忙分析原因。

相关代码

App.js

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

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

export default App;

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;

.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 */
  }

问题原因与修复方案

原因分析

当前导航栏为垂直布局，但每个导航链接（.navbar-button）默认是行内元素，既没有设置让图标与文字垂直对齐的布局，也没有让整个内容在导航栏宽度内水平居中。另外CSS中vertical-align: center是无效值，正确值应为middle，且现有SVG的样式设置没有配合父元素布局发挥作用。

修复步骤

修改导航链接的布局
将每个导航链接设置为flex容器，实现图标与文字的垂直居中，同时让内容在导航栏宽度内水平居中：

.navbar a {
  text-decoration: none;
  color: black;
  padding: 10px;
  font-size: small;
  /* 替换原有vertical-align，使用flex布局 */
  display: flex;
  align-items: center; /* 垂直居中图标和文字 */
  justify-content: center; /* 水平居中所有内容 */
  gap: 0.5rem; /* 控制图标与文字的间距，替代margin-right */
}

简化SVG的样式
移除SVG类中不必要的布局属性，仅保留尺寸和颜色相关设置即可：

.button-svg {
  /* 去掉display: inline-flex和align-items: center */
  width: 1.25rem; /* 可根据需求调整图标大小 */
  height: 1.25rem;
}

（可选）统一导航链接类名
因为所有链接都使用了.navbar-button类，可以直接对该类设置样式，让代码更清晰：

.navbar-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  text-decoration: none;
  color: black;
  padding: 10px;
  font-size: small;
}

完成以上修改后，SVG图标会与文字垂直对齐，并且整个内容块在导航栏的每个链接区域内水平居中。

内容的提问来源于stack exchange，提问作者Fran Lanusse

React侧边导航栏中Bootstrap SVG图标无法居中问题求助

问题描述 #

相关代码 #

App.js #

navbar.js #

navbar.css #

问题原因与修复方案 #

原因分析 #

修复步骤 #