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

Question

我一直在寻找我的问题的解决方案，但是如果不使用自定义 css 类就找不到解决问题的方法。我想知道是否有可能只使用弹性类来做我正在寻找的事情。

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

        <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 垂直对齐此文本？我无法完全了解正在发生的事情。

标签： cssreactjsbootstrap-4alignmentreact-bootstrap

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