React-bootstrap navbar nav-item, how to align text vertically

user_9502530 0
Viewed 797

I've looked for the solution of my problem, but can't find a way to fix the situation without using a custom css class. I'd like to know if it is possible to do what I'm looking for using only flex classes.

I've this simple navbar component:

        <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>

Where TIMER is a simple <p>text</p>.

Is it possible to vertically align this text with align-self: center? I can't fully get what it is happening. enter image description here

react-bootstrap bootstrap-4 reactjs alignment css
1 Answers

I've found a way, but I do not like it so much because I've substituted Nav.Item with Nav.Link.. this is not so good:

        <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>

Before I was using 2 nav inside navbar, honestly I do not know how much it is correct.. Instead now I'm using just one NAV but I can't set it as large as the NAVBAR to move the Timer on right

enter image description here

user_95025300
Related