Html 导航栏未将我的链接居中，我没有'；I don’我不知道如何使用flexbox

我正在为一个公文包构建项目制作一个导航栏，但我无法让导航栏完成我希望它完成的任务。我希望“谁需要报价”一直显示在左侧，这是正确的。但我希望我的链接“体育、商业、政治”显示在屏幕中央。我一直在使用flexbox，但没有一个选项可以做到这一点。有人能帮我吗？这是我的密码。谢谢

//js file
import React, {Component} from 'react';
import {Navbar, Nav,NavDropdown, Form, FormControl, Button} from 'react-bootstrap';

import './Topbar.css'
import img from './logo.png'

class Topbar extends Component {
  render() {
    return (
      <div className = "OuterDiv">
        <div>
        <a class="active" href="/">Who Needs A Quote!?</a>
        </div>
        <div class = "topnavcenter">

        <a href="/SportsPage">Sports</a>
        <a href="/BusinessPage">Business</a>
        <a href="/PoliticsPage">Politics</a>
        </div>
      </div>

    )
  }
}

export default Topbar;

//css file

.OuterDiv {
  display: flex;
  flex-direction: row;
  background-color: #FFFF00;
  padding: 14px 16px;
  font-size: 17px;

}



.topnavcenter {
  float: center;

}

//js文件
从“React”导入React，{Component}；
从“react bootstrap”导入{Navbar、Nav、NavDropdown、Form、FormControl、Button}；
导入“./Topbar.css”
从“./logo.png”导入img
类Topbar扩展组件{
render（）{
返回(
)
}
}
导出默认顶栏；
//css文件
欧特尔迪夫先生{
显示器：flex；
弯曲方向：行；
背景色：#FFFF00；
填充：14px 16px；
字号：17px；
}
.topnavcenter{
浮动：中心；
}

---

再次感谢

我不确定我是否完全正确理解了这个问题，但我会尽力回答。您很可能需要输入以下内容：
-ms-align-self：中心
自对准：居中；

---

对于topnavcenter块，有几种方法可以使链接居中。选择哪一个取决于您将如何设置导航栏的样式

文本对齐：居中

对于一组简单的纯文本链接，一种快速方法是使用
text align:center
将
.topnavcenter
的内容居中


.OuterDiv{
显示器：flex；
弯曲方向：行；
背景色：#FFFF00；
填充：14px 16px；
字号：17px；
}
.topnavcenter{
文本对齐：居中；
}

Hi@Tara's Lyashko。谢谢我出去了一会儿，但我一回来就会检查一下。我知道我的建议不起作用。对您可以共享可以为测试打开的代码，否则任务不是很清楚。嗨，塔拉斯。我现在正在把它放到沙箱里，对不起，我以前从来没有做过。嗨，塔拉斯。这是沙箱。你能告诉我你是否能访问它吗？谢谢我希望体育、商业、政治链接位于黄色barHi@agrm的中心。这两种选择都不起作用。我认为将topnavcenter设置为容器选项并不是将flex容器设置为整行，而对于文本对齐：居中选项，同样的情况也在发生。对不起。如果代码片段没有像你期望的那样集中链接，我一定误解了你在寻找什么。我尝试了你的解决方案，但没有成功。我想把体育、商业和政治链接放在黄色条的中间