Why having li element of image where they are all centered shows them misaligned?

<ul className="flex gap-4 items-center">
          <li className="justify-center items-center">
            <img src='logo.svg' alt='logo' />
          </li>
          <li className="h-6">Collections</li>
          <li className="">Men</li>
          <li>Women</li>
          <li>About</li>
          <li>Contact</li>
        </ul>