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>
No description
12 Replies
Mannix
Mannix•3w 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
zlsyx
zlsyxOP•3w ago
No description
zlsyx
zlsyxOP•3w 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
Mannix•3w ago
hmm I'm might be wrong. Now it looks like you should play with the line-height for the links
Chris Bolson
Chris Bolson•3w ago
Alternatively you could add some bottom padding to the logo to compensate for the height of the stem in the letter "k".
zlsyx
zlsyxOP•3w 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
Chris Bolson•3w 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"
zlsyx
zlsyxOP•3w 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>
zlsyx
zlsyxOP•3w ago
No description
zlsyx
zlsyxOP•3w 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
zlsyx
zlsyxOP•3w ago
Tailwind Play
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
Chris Bolson•3w 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
Want results from more Discord servers?
Add your server