Flexbox Items Not Vertically Centering In Tailwind - reactjs

Question

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

Answer 1

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 class="flex justify-between items-center bg-gray-900">
<div class="h-24 flex items-center">
<img class="w-40 py-2 px-2" src="https://via.placeholder.com/150x50"></img>
</div>
<div class="flex">
<p class="px-4 text-white">About</p>
<p class="px-4 text-white">Books</p>
<p class="px-4 text-white">Videos</p>
<p class="px-4 text-white">Quotes</p>
</div>
</div>

Answer 2

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 class="flex justify-between items-center bg-gray-900 h-24">
<div class="">
<img class="w-40 py-2 px-2" src=""></img>
</div>
<div class="flex ">
<p class="px-4 text-white">About</p>
<p class="px-4 text-white">Books</p>
<p class="px-4 text-white">Videos</p>
<p class="px-4 text-white">Quotes</p>
</div>
</div>
The output generated by the following code :

Answer 3

EDIT: The problem is that the list items were in tags and not tags - when changing the links from to , the list items centered vertically automatically without any further changes needed.
import React from 'react'
import Logo from '../images/Logo.png'
const Navbar = () => {
return (
<div className="flex justify-between items-center bg-gray-900 fixed inset-x-0 z-40">
<div className="">
<img className="w-40 px-2 mt-6" src={Logo}></img>
</div>
<div className="flex flex-row items-center justify-center mt-6">
<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