React-bootstrap navbar nav-item，如何垂直对齐文本答案

【问题标题】：React-bootstrap navbar nav-item, how to align text verticallyReact-bootstrap navbar nav-item，如何垂直对齐文本
【发布时间】：2020-11-14 14:16:55
【问题描述】：

我一直在寻找我的问题的解决方案，但是如果不使用自定义 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>text</p>。

是否可以使用 align-self: center 垂直对齐此文本？我无法完全了解正在发生的事情。

【问题讨论】：

这里解释说，在没有问题的情况下，可以在导航栏中拥有多个导航：stackoverflow.com/questions/4676388/multiple-nav-tags 现在我需要了解如何将一个 NAV.ITEM 向右移动（浮动和 ml -auto 不起作用）

标签： css reactjs bootstrap-4 alignment react-bootstrap

【解决方案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 导航之前，老实说，我不知道它的正确程度。相反，现在我只使用了一个导航，但我无法将其设置为与导航栏一样大来移动计时器对了

【讨论】：