Flexbox Items Not Vertically Centering In Tailwind-CodePudding

I am making a navbar in Tailwind consisting of links but I cannot get them to vertically center:

Here is what it looks like:

Steps I have tried:

items-center
justify-center

Setting the parent to flex-col

None of these options work.

How do you get the links to be exactly in the middle of the navbar vertically ?

Here is the code:

import React from 'react'
import Logo from '../images/Logo.png'

const Navbar = () => {

    return (
        <div className="flex justify-between items-center bg-gray-900">
            <div className="">
            <img className="w-40 py-2 px-2" src={Logo}></img>
            </div>
            <div className="flex flex-row items-center justify-center">
                <p className="px-4 text-white">About</p>
                <p className="px-4 text-white">Books</p>
                <p className="px-4 text-white">Videos</p>
                <p className="px-4 text-white">Quotes</p>
            </div>
        </div>
    )
}

export default Navbar

CodePudding user response：

The divs inside the flex class are aligned at the center, but the issue appears to be the first dive with the h-24 class which also contains the logo image. The logo aligns at the top of the div with the height of h-24 which is taller than the div containing the menu items. If you get rid of the h-24 or align the image vertically, they all align vertically. Try this:

<div >
    <div >
      <img  src="https://via.placeholder.com/150x50"></img>
    </div>
    <div >
        <p >About</p>
        <p >Books</p>
        <p >Videos</p>
        <p >Quotes</p>
    </div>
</div>

CodePudding user response：

It is working just fine. Please recheck the code you have sent, is it what it is producing the output you have produced in your question.

<div >
    <div >
      <img  src=""></img>
    </div>
    <div >
        <p >About</p>
        <p >Books</p>
        <p >Videos</p>
        <p >Quotes</p>
    </div>
</div>

The output generated by the following code :