有没有办法使用react导航在标题中插入图像+文本并使其居中？

import React from 'react';
import { Link } from 'react-router-dom';

const Navigation = () => {
  return (
    <nav>
      <ul>
        <li>
          <Link to="/">
            <img src="image.png" alt="Logo" />
            <span>Home</span>
          </Link>
        </li>
        <li>
          <Link to="/about">
            <img src="image.png" alt="Logo" />
            <span>About</span>
          </Link>
        </li>
        {/* 其他导航链接 */}
      </ul>
    </nav>
  );
};

export default Navigation;

nav ul {
  display: flex;
  align-items: center;
  justify-content: center;
}

nav li {
  margin-right: 10px;
}

nav li {
  position: relative;
}

nav li img,
nav li span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}