关于在中间的导航栏中定位播放按钮的 CSS 问题

Question

我正在尝试将按钮移动到导航栏的中间，但运气不好，我应该触摸什么元素才能让 css 做到这一点？

这是我的导航栏 react js 文件，试图找出要在这里操作的容器。

import React, { Component } from 'react'
import "./css/Navbar.css"
import { useNavigate , Link } from 'react-router-dom'
import Metamask from "./Metamask"

function Navbar() {

  let navigate = useNavigate(); 
function clickHandle(){
  let path = `metamask`;
  navigate(path);
}

  return (
    <nav class="navbartop navbar navbar-expand-lg bg-dark">
    <div class="container-fluid">
      <a class="navbarlabel navbar-brand " href="#">Souls</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      Nav Bar
      <span class="navbar-toggler-icon navbar-dark"></span>
      </button>
      <button onClick={clickHandle} class="play-now btn btn-secondary btn-md">Play Now</button>    

      <div class="collapse navbar-collapse justify-content-end" id="navbarNav">
        <ul class="navbar-list navbar-nav ">
          <li class="nav-item " >
            <Link to="/" class="nav-link-item nav-link " aria-current="page" href="Home">Home </Link>
          </li>
          <li class="navbar-list nav-item">
            <Link to="/whitepaper" class="nav-link-item nav-link" href="Whitepaper">Whitepaper </Link>
          </li>
          <li class="navbar-list nav-item">
          <Link to="/faq" class="nav-link-item nav-link" href="FAQ">FAQ </Link>
          </li>
        </ul>
      </div>
    </div>
  </nav>
  )
}

export default Navbar