Kevin Powell - Community•4w ago

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>

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

12 Replies

Mannix•4w ago

I'm sure they are centered but i guess you expected they would line up with the text of the logo ?? you probably need to trim the logo height a bit also those classes on the first li probably do nothing

zlsyxOP•4w ago

@Mannix It seems there is some space there but padding is 0. Why would trimming the height of the logo solve the issue? >I'm sure they are centered but i guess you expected they would line up with the text of the logo ?? Of course. That's the default expectations when all elements are centered vertically.

Mannix•4w ago

hmm I'm might be wrong. Now it looks like you should play with the line-height for the links

Chris Bolson•4w ago

Alternatively you could add some bottom padding to the logo to compensate for the height of the stem in the letter "k".

zlsyxOP•4w ago

It just doesn't make sense, for example, in here it appears aligned but the code is in CSS which should be same as the TailwindCSS: https://jsfiddle.net/m75pxkn2/

Edit fiddle - JSFiddle - Code Playground

JSFiddle - Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle.

Chris Bolson•4w ago

Tailwind automatically makes all images "block" elements (I think). As no doubt you know, by default images are inline precisly for this reason, so that they have the same baseline spacing as the text/font. By making the image a block element it removes this bottom spacing which, in your Tailwind version, is pusing the image down. Try updating your image element to have the class "inline"

zlsyxOP•4w ago

  <ul className="flex items-center">
        <li>
          <img src="logo.svg" alt="logo" className='inline' />
        </li>
        <li>
          Text
        </li>
      </ul>
      <hr />
      <ul className="cssUl">
        <li>
          <img src="logo.svg" alt="logo" />
        </li>
        <li>
          Collections
        </li>
      </ul>

  <ul className="flex items-center">
        <li>
          <img src="logo.svg" alt="logo" className='inline' />
        </li>
        <li>
          Text
        </li>
      </ul>
      <hr />
      <ul className="cssUl">
        <li>
          <img src="logo.svg" alt="logo" />
        </li>
        <li>
          Collections
        </li>
      </ul>

zlsyxOP•4w ago

This is the first time I am using TailwindCSS and it's a bad start lmfao. It makes even the regular CSS that I'm trying to use behave in a weird way. tried inline, inline-block for the display property and it's still not aligned

zlsyxOP•4w ago

https://play.tailwindcss.com/6FcNTl4Jtw

Tailwind Play

An advanced online playground for Tailwind CSS that lets you use all of Tailwind's build-time features directly in the browser.

Chris Bolson•4w ago

OK, it is much easier to see when there is real code 😉 It looks like Tailwind is also adding vertical-align: middle. Ironically, in this case, this is preventing it from being aligned in the middle. Try adding align-baseline inline to your image

Gaming

Programming

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