Tailwind中导航栏Flexbox子项无法垂直居中的问题求助

各位好，我正在用Tailwind构建一个带导航链接的导航栏，但遇到了个头疼的问题——怎么都没法把这些链接垂直居中对齐。

现在导航栏里的链接总是不在垂直方向的正中间，看起来特别不协调。

我已经尝试过这些方法，但都没起作用：

• 使用items-center类
• 使用justify-center类
• 将父元素设置为flex-col布局

有没有大佬能教教我，怎么才能让这些链接精准地处于导航栏的垂直中间位置呢？

以下是我的代码：

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

备注：内容来源于stack exchange，提问作者Julius Goddard