search

tailwindlabs / discuss

A place to ask questions, get help, or share what you've built with Tailwind CSS.
MIT License
171 stars 9 forks source link

.align-middle has a really strange behavior in documentation o.0 #408

Open RomainMazB opened 4 years ago

RomainMazB commented 4 years ago

Hi everyone, I just had a headache with Tailwind when I want to vertical-align a span into a div (I'm new with Tailwind but already love it).

I read the documentation and found this and said "Cool stuff!".

It says:

Use .align-middle to align the middle of an element with the baseline plus half the x-height of the parent. <span class="inline-block align-middle ...">...</span>

But wow: I tried to use it out of the box: it didn't work! I looked into the documentation source code and reproduced a simplified pen of it.

The empty span is required, this is how the documentation uses it and I tried many workarounds, it's definitely required! This seems to be really strange to me to create an empty "useless" span, to align the next span which I want to align. No?

After times (shamed to say hours), I found an alternative solution that doesn't even use .align-middle. You can find the snippet here.

Am I the only one who spent a lot of time to "debug" this specific documentation guideline?

adamwathan commented 4 years ago

This isn't a Tailwind specific thing, just how vertical-align works in CSS. Tailwind is just a very thin layer on top of raw CSS properties so we don't do any magic here.

For vertically centering things for layout purposes, Flexbox is definitely the right solution. vertical-align is only concerned with how multiple inline items are aligned relative to each other in the same container.

I agree it's not a bad idea to call this out in the docs though and point people who are less experienced with CSS in the right direction 👍

RomainMazB commented 4 years ago

Thanks for the reply and the good explanations.

Yeah, I think there are some sources of doubt in this part of the documentation:

Use .align-middle to align the middle of an element with the baseline plus half the x-height of the parent.

Even if when you understand how it works, it's definitely true and clear, the way it's mentioned (referred to the parent node) suggests that the actual span could be aligned in the middle of the parent magically :)

It should be something like (I suppose):

Use .align-middle to align the middle of an element with the middle of the actual baseline

If documentation were open-source, I would be glad to submit some less experienced speaks

I've just seen your Laracon VII's talk, TailwindCSS is definitely an awesome framework I want to work with for a long time 👏 👏