React-bootstrap导航栏中的nav-item如何垂直对齐文本

Question

我一直在寻找解决问题的方法，但找不到不使用自定义css类来修复情况的方法。我想知道是否可以仅使用flex类来实现我要找的内容。

我有这个简单的导航栏组件：

        <Navbar bg="dark" variant="dark">
            <Navbar.Brand href="#home">Navbar</Navbar.Brand>
            <Nav className="mr-auto">
                <Nav.Link href="#home">Home</Nav.Link>
                <Nav.Link href="#features">Features</Nav.Link>
                <Nav.Link href="#pricing">Pricing</Nav.Link>
            </Nav>
            <Nav className="mr-left">
                <Nav.Item >
                        <Timer/>
                </Nav.Item>
            </Nav>
        </Navbar>

TIMER是一个简单的<p>文本</p>。

是否可能使用align-self: center来垂直对齐这段文本？ 我无法完全理解发生了什么。

- lordcroci

---

在这里解释了如何在导航栏中拥有多个NAV而不会出现问题： https://dev59.com/q2445IYBdhLWcg3w1tgS 现在，我需要找出如何将一个NAV.ITEM移动到右侧（浮动和ml-auto无效）。 - lordcroci

Answer 1

我找到了一种方法，但我不太喜欢它，因为我用 Nav.Link 替换了 Nav.Item.. 这不是很好:

        <Navbar bg="dark" variant="dark">
            <Navbar.Brand href="#home">Navbar</Navbar.Brand>
            <Nav className="mr-auto">
                <Nav.Link href="#home">Home</Nav.Link>
                <Nav.Link href="#features">Features</Nav.Link>
                <Nav.Link href="#pricing">Pricing</Nav.Link>
                <Nav.Link className="disabled ml-auto">
                    <Timer/>
                </Nav.Link>
            </Nav>
        </Navbar>

之前我在导航栏中使用了2个nav标签，老实说我不知道这样做是否正确。现在我只使用一个nav标签，但我无法将其设置为与导航栏一样大以移动右侧的计时器。

- lordcroci