文本对齐居中不会使导航栏中的项目居中

Question

我遇到一个问题，无法将项目集中在导航栏中。它们仍然出现在左侧。我正在使用React

我的导航栏代码

<div className="header">
<div className="navbar">
<Navbar fixed="top" bg="light" expand="lg">
<Navbar.Brand href="#home">Darzi Apartments</Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="mr-auto">
<Nav.Link href="#new-homes">New Homes</Nav.Link>
<Nav.Link href="#commercial-premises">Commercial Premises</Nav.Link>
<Nav.Link href="construction-services">Construction Services</Nav.Link>
<Nav.Link href="#careers">Careers</Nav.Link>
<Nav.Link href="#about-us">About us</Nav.Link>
</Nav>
</Navbar.Collapse>
</Navbar>
</div>
</div>

CSS部分

.header {
width: 100% !important;
display: inline-block;
text-align: center;
}

我应该在CSS中指定什么来使Navbar中的项目位于Navbar的中心？

Answer 1

'text align'属性将文本对齐元素内部，而不是'text element'。您可以在此处阅读有关文本对齐的更多信息：https://www.w3schools.com/cssref/pr_text_text-align.ASP

有几种方法可以在导航栏的中心对齐html元素，我的首选是使用"flexbox"。

以下是有关flexbox的一些资源：https://css-tricks.com/snippets/css/a-guide-to-flexbox/https://www.w3schools.com/css/css3_flexbox.asp

Answer 2

我认为这是由于您的.js文件不是.jsx文件，因此className无效。将className更改为class对我有效。所以如果我是你，我会尝试更改扩展名。

Answer 3

在中心对齐头类中的所有内容。

.header {
display:flex;
justify-content: center;
align-items: center;
}

这些样式应该适用于任何要将其子元素居中的元素。