Align Items Q&A

[00:00:00]
>> There was a question earlier around text-aligned middle versus justify content center?
>> Absolutely, so justify content is used with Flexbox. Text-aligned middle is used on text or containers with text inside, so it doesn't have to be a Flex container. But that justify content, anything would justify something is used with Grid and Flexbox.

[00:00:26]
>> So for instance, that arrow positioning in the middle of the button, you could, in theory, use the justify content center as well, right?
>> Well, let's try it. It's a good question. Yeah, I'll stop talking and we'll just see what happens if we try it, right? So on our button, first of all let's get rid of that vertical line, justify content center.

[00:00:53]
Look at that, it's not doing anything, right? Try setting display to something other than block. So, if we set a display of flex on here, well now, JustifiedContent will actually do something. So display flex align-items center. You could do it this way, absolutely. But it just requires that you set a display of flex on a button element, which I don't know if there's a best practice around it, I try to stay away from this unless it's really needed, but justify content will only work, and align items will only work if it's a flex container.

[00:01:29]
So that's why I've used vertical align middle, because I don't need to set a flex container. Does that make sense.
>> What's the difference between align items and then align text?
>> Text Align versus align items. So align items again, is going to be for Flexbox and I believe grid has something very similar, if not the same syntax.

[00:01:57]
Text align is going to be, if you've got a div with a paragraph inside, here, let's just do it together. So let's say I have a div, And inside that div I've got a paragraph. I'll put some more mix and text in here, all right? So, this div, let's give it a stop it.

[00:02:23]
Let's give it a height of like 100 pixels. We'll give it a border so we can see what that looks like. All right. Got our nice little div. We could do text align. I forget if this is the div or the paragraph, but I think we can do it here, text align center look at that, centers our text inside of our div, right?

[00:02:43]
If I tried align items in the center, it's not gonna do anything. That's because this is not a FluxContainer. So display, we set it as a FluxContainer. Well, now it's aligning items in the center vertically, and we can justify content center. And that will move it to the center, or it should.

[00:03:05]
JustifyContent. Why are you mad? It should move it. No, JustifyContentCenter. It should move it center. That's because this is a block element, it takes up the whole width, right? Like if I set an explicit width here on this paragraph, let's do that here. Let's say width, let's say, I don't know, 75.

[00:03:37]
That's really small, let's say 100. Okay. Okay, it's really small. But the point is, Did I forget the unit last time? When this paragraph element doesn't take up that whole width, which block elements do by default, right? Then we can use align items and justify content center if the parent is a flex container.

[00:04:05]
But when we remove this, when the parent is not a flex container, these properties don't do anything. So that is why we like to use text align center. It's to kind of avoid having to make something a flex container sometimes. Yeah, so vertical, align, middle. Should move it down.

[00:04:32]
OK, well, now I'm freelance. Now things, of course, are not gonna work. I think there is a margin,
>> Someone asked about what is with align items baseline.
>> Yeah, baseline has to do with, I believe, the font. So align items baseline. It's not something you're gonna see-

[00:04:54]
>> It goes with the V-align, vertical align, baseline, bottom, top.
>> Yeah, but it has to do with the font. So here, Items are aligned such that their baselines are aligned. Do you see here? They all have font and all the baseline of that font are aligned. So that's the difference here.

[00:05:16]
They can have different heights, but let's say the Texas in different place, it's gonna align the baseline of those font families. So yeah, here's the example in CSS tricks, the baseline of the font is aligned here. That one's a little bit more nuanced. You probably won't see it as often but it's good to be aware that that does exist.

[00:05:47]
Okay, anything else on those? Those are all really great questions.
>> I have a question.
>> Yeah.
>> I've heard people use the pseudo elements after on buttons for images and icons, is that you could practice or not really?
>> I think it's pretty common practice. In terms of best practice, I don't think it's as accessible for screen readers as using like an SVG icon or a span.

[00:06:17]
Although admittedly, now I'm questioning myself if you're even technically supposed to put other elements inside of button content. So yeah, that's a little tricky. So using after, or button content or button icon, let's say, adding an icon to a button. We're back on our good old Stack Overflow here.

[00:06:38]
I wanna add an icon before the text. I don't know how I should do this. Let's see. You could add a span like I mentioned, right? And you can give it a width and background image, right? Or we could use that pseudo element after like they're doing here, or in this case, it's before Setting the content here.

[00:06:57]
So those are both ways that will work, absolutely. In terms of best practice. I'm not certain. But I always try to avoid using pseudo elements if I can cuz they're kind of a pain in the butt.