This works as long as the child element is not a container element with a defined width, such as div or section. Because the text-align property doesn't work on div itself, only on the content.
Someday we'll treat HTML and JS as a dress rehearsal, and take everything we now know and develop a vastly better replacement which will run alongside them in every browser, and after enough sites migrate, we drop the old languages. And throw a huge party.
@@NotJayUU and how many browsers actually supported it, as opposed to just claiming that they did? To be fair, I wouldn’t know. This is more of a me problem, but at the time I needed to support websites that were being accessed in South America where you could only assume that they would have the version of the browser that came with whatever OS they were running. That’s what I was trying to communicate with the “+” but I get that is really not clear at all.
There is a new multikeyword display property. display: block flex or display: inline flex will let you specify both the placement and the inner layout. (Why these two distinct features were ever mashed together in one property is beyond me)
Yeah, but the problem with revamping html is older browser support. I never get why there's so much importance on supporting old browsers, especially now that Windows 7 has been discontinued and Windows 10 is going soon too. So the majority will be updated to many recent browsers. But it's a matter of making a website accessible to everyone. We have plenty of frameworks now too. And I know the React peeps won't get over their ex if and when html gets a major revamp. It also depends a lot on bigger corporations that decide on a standard for the web.
@@Endrit719then just create a legacy mode that will replace the code with legacy compatible or something, most sites aren’t even compatible with old browsers
@@cake3014 Not everyone cares about new technology and companies want to deliver websites to maximum amount of people, general population not being tech savvy enough isn't a good argument to abandon backwards compatibility. Yes you can revamp HTML which will work thousand times better than old HTML but try selling a fact that it will only work for 50% of users to any client and get ready to be laughed at.
It was only released on March 19th 2024. It works on display: block. What you were using only worked with display: flex or grid. The support now is only about 79% align-content on display block, unlike the 96% align-content on display flex
That you can. Using the display property. You more or less mimic the structure of a table with divs. And apply the appropriate display property. e.g. = display: table; = display: table-row; ... etc. I wouldn't recommend it though. It's a lot easier just to use a table. There is a lot of accessibility goodness when you use the semantically correct HTML tags. If it isn't actually a table, I would look into using display grid.
@@DevDiveIn That's very good to hear! Thank you. The problem with using Tables, at least 15 yrs ago when I was active, was how Web Crawlers interpret them. Tables are expected to contain tabular data, and not contextual content. Do you know if Accessibility tools like Screen Readers will be able to handle websites designed with tables today?
@Rovsau - Ya I don't miss those table days, or IE 6 for that matter ;) If the content belongs in a table, then screen readers prefer you use the html tag. When you use a divs by default screen readers lose reference to what other divs belong in the same row/col. You have to do some work to reimplement that functionality so screen readers can read it properly. If you're laying out an entire site. I wouldn't use tables or the div equivalent, there are much better alternatives now. Screen readers would try and read your site as a table which it is not. display: grid does pretty much the same thing as tables (and more), and is much more robust and flexible. I have a video on it if that helps. th-cam.com/video/B6QddhvpUUo/w-d-xo.html
it's strange you titled the video: "this should have been in CSS years ago".... considering the spec for align-content was released in 2012, and supposed by every browser by 2015 I guess the newness if it's supported in a block layout, but like.... before that is was just 1 additional property "display: flex/grid"....
Yep exactly. We should have been able to vertically center things with block elements years ago. I guess having so many alternatives really slowed progress on having it implemented for block elements.
From what I tried it looks to be the same as flex. The only difference I noticed was how margins collapse. Flex stacks margins on top one another, block merges the top and bottom margins together.
Works but I feel like we didn't need another way of doing it. As grid and flex Cover 99.9% of usecases im not aware of elements that have to be Block that have content i dont See the usecase for this.
1:10 thats not correct place-items: center; means: justify-items: center; align-items: center; there is also place-content: center; which means justify-content: center; align-content: center; content is the area of the grid or flex layout where the child item lives in and item is the actual item in that area
Dark Modern. But, I created a profile where I customized the colors. Created a Gist of my settings.json for my profile. gist.github.com/dev-divein/bdad2f449811b6d191cab520730dee74
We got "align-content: center;" before GTA6.
lol. Should be a metric on MDN and caniuse. Before GTA6: yes.
we got "align-content: center;" before GTAV.......
This works as long as the child element is not a container element with a defined width, such as div or section. Because the text-align property doesn't work on div itself, only on the content.
does the text-align property apply to the content of the inner container elements too? like recursively?
@@gerooqyes
@@thecoolnewsguy well that sucks, unless it's overridable
Brooootthhheeerrrrr 😵💫🤌
@@gerooq The word you are looking for is cascade
Straight to the point, no bullshit. Subscribed.
Someday we'll treat HTML and JS as a dress rehearsal, and take everything we now know and develop a vastly better replacement which will run alongside them in every browser, and after enough sites migrate, we drop the old languages.
And throw a huge party.
Not cool to kill a meme Chrome!
"HOW TO CENTER A DIV"
Oh god… thankfully my brain has forgotten the arcane magic one had to do 10+ years ago to try to center something on a web-page…
this property came out out over 10 years ago.... so you could just use this
@@NotJayUU and how many browsers actually supported it, as opposed to just claiming that they did?
To be fair, I wouldn’t know. This is more of a me problem, but at the time I needed to support websites that were being accessed in South America where you could only assume that they would have the version of the browser that came with whatever OS they were running.
That’s what I was trying to communicate with the “+” but I get that is really not clear at all.
@@Vendavalez there's a website caniuse, it's good for checking this stuff.
2015 was when it was supported in all major browsers
Now you may begin to heal.
There is a new multikeyword display property. display: block flex or display: inline flex will let you specify both the placement and the inner layout. (Why these two distinct features were ever mashed together in one property is beyond me)
i still can't believe that this is a thing
This is why html needs a revamp
Yeah, but the problem with revamping html is older browser support. I never get why there's so much importance on supporting old browsers, especially now that Windows 7 has been discontinued and Windows 10 is going soon too. So the majority will be updated to many recent browsers. But it's a matter of making a website accessible to everyone. We have plenty of frameworks now too. And I know the React peeps won't get over their ex if and when html gets a major revamp. It also depends a lot on bigger corporations that decide on a standard for the web.
@@cake3014 people still use windows xp, trust me
@@Endrit719then just create a legacy mode that will replace the code with legacy compatible or something, most sites aren’t even compatible with old browsers
@@Endrit719 I know that that is the case but I don't get why 😮💨😮💨😮💨
@@cake3014 Not everyone cares about new technology and companies want to deliver websites to maximum amount of people, general population not being tech savvy enough isn't a good argument to abandon backwards compatibility. Yes you can revamp HTML which will work thousand times better than old HTML but try selling a fact that it will only work for 50% of users to any client and get ready to be laughed at.
Me who knows nothing about CSS: This is truly a game changer
This is awesome! Thanks for sharing
Yeah, web design is “awesome”.
so Safari might support this 2034
And it only took... *checks calendar*... 27 years!
the beauty of css is that prob none of these will work for my purpose XD
So what's your purpose
Me: create a row with a column inside. Center that column. Put something in that column. Center the content of that column, voila volare vio
Perfect
Finally.
YESSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSs
I've already used this since 2019
ya... this came out in 2012, I don't get why every is acting like this is something crazy...
Because if I understood correctly it's not using grid or flex. It works directly on block elements
It was only released on March 19th 2024.
It works on display: block.
What you were using only worked with display: flex or grid.
The support now is only about 79% align-content on display block, unlike the 96% align-content on display flex
@@NotJayUU why are y'all acting like some kind of OGs while knowing nothing about the topic
@@theseangle ?
Question: Is there a way today to make a set of divisions behave like a table, where it would dynamically adjust the size of each row and column?
That you can. Using the display property. You more or less mimic the structure of a table with divs. And apply the appropriate display property. e.g. = display: table; = display: table-row; ... etc. I wouldn't recommend it though. It's a lot easier just to use a table. There is a lot of accessibility goodness when you use the semantically correct HTML tags. If it isn't actually a table, I would look into using display grid.
@@DevDiveIn That's very good to hear! Thank you.
The problem with using Tables, at least 15 yrs ago when I was active, was how Web Crawlers interpret them. Tables are expected to contain tabular data, and not contextual content.
Do you know if Accessibility tools like Screen Readers will be able to handle websites designed with tables today?
@Rovsau - Ya I don't miss those table days, or IE 6 for that matter ;) If the content belongs in a table, then screen readers prefer you use the html tag. When you use a divs by default screen readers lose reference to what other divs belong in the same row/col. You have to do some work to reimplement that functionality so screen readers can read it properly. If you're laying out an entire site. I wouldn't use tables or the div equivalent, there are much better alternatives now. Screen readers would try and read your site as a table which it is not. display: grid does pretty much the same thing as tables (and more), and is much more robust and flexible. I have a video on it if that helps.
th-cam.com/video/B6QddhvpUUo/w-d-xo.html
it's strange you titled the video: "this should have been in CSS years ago".... considering the spec for align-content was released in 2012, and supposed by every browser by 2015
I guess the newness if it's supported in a block layout, but like.... before that is was just 1 additional property "display: flex/grid"....
Yep exactly. We should have been able to vertically center things with block elements years ago. I guess having so many alternatives really slowed progress on having it implemented for block elements.
Failed so many interviews because of this lol
My goto is position: absolute; inset: 0; margin: auto; width: fit-content; height: fit-content.
This only works with pictures of cats.
You could also use width 100% height 100% and object-fit also (assuming no other content in div)
What happens when the container has two children? Would it behave the same as flex or grid? Or else?
From what I tried it looks to be the same as flex. The only difference I noticed was how margins collapse. Flex stacks margins on top one another, block merges the top and bottom margins together.
❤
Works but I feel like we didn't need another way of doing it. As grid and flex Cover 99.9% of usecases im not aware of elements that have to be Block that have content i dont See the usecase for this.
dream come true lmao
Why I see this cat picture everywhere?
Still prefer flex items-center justify-center
1:10 thats not correct
place-items: center;
means:
justify-items: center;
align-items: center;
there is also place-content: center;
which means
justify-content: center;
align-content: center;
content is the area of the grid or flex layout where the child item lives in
and item is the actual item in that area
@nomadshiba - good call out. That is my bad. I misspoke.
hallelujah
Why would text-align work on an image. Wierd, it literally says 'text'
Because image is by default an inline element. It is easier to imagine the image as just another big character in the text.
Why not content-align?
why not con-align-tent?
Like this's the real problem!?
place-items is actually shorthand for justify-items and align-items
justify-content ?
Vs code theme name
Dark Modern. But, I created a profile where I customized the colors.
Created a Gist of my settings.json for my profile.
gist.github.com/dev-divein/bdad2f449811b6d191cab520730dee74
@@DevDiveInNice, thanks!
BRAHHGHAHAHA
dream come true lmao