This Should Have Been In CSS Years Ago

Рет қаралды 22,426

9 күн бұрын

Learn how to center content in CSS easily with this simple tutorial. Say goodbye to hacks - this should have been in CSS years ago!

Пікірлер: 57

@fp6260 Күн бұрын

We got "align-content: center;" before GTA6.

@DevDiveIn Күн бұрын

lol. Should be a metric on MDN and caniuse. Before GTA6: yes.

@diego.almeida 7 күн бұрын

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.

@gerooq 6 күн бұрын

does the text-align property apply to the content of the inner container elements too? like recursively?

@thecoolnewsguy 6 күн бұрын

@@gerooqyes

@gerooq 6 күн бұрын

@@thecoolnewsguy well that sucks, unless it's overridable

@macavalli2619 3 күн бұрын

Brooootthhheeerrrrr 😵‍💫🤌

@StiekemeHenk 3 күн бұрын

@@gerooq The word you are looking for is cascade

@vahekhachaturian2424 2 күн бұрын

i still can't believe that this is a thing

@Vendavalez Күн бұрын

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…

@AerysBat Күн бұрын

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)

@rhiji4583 Күн бұрын

so Safari might support this 2034

@perfectionbox 2 күн бұрын

This is why html needs a revamp

@cake3014 2 күн бұрын

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.

@Endrit719 2 күн бұрын

@@cake3014 people still use windows xp, trust me

@snesmocha 2 күн бұрын

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

@giovannibandinelli9792 Күн бұрын

@@Endrit719 I know that that is the case but I don't get why 😮‍💨😮‍💨😮‍💨

@Maleficarum999 Күн бұрын

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

@OfficialViper Күн бұрын

Straight to the point, no bullshit. Subscribed.

@Voltra_ 3 күн бұрын

Not cool to kill a meme Chrome!

@yerenzter 3 күн бұрын

I've already used this since 2019

@Flyde 2 күн бұрын

This is awesome! Thanks for sharing

@guyincognito5663 Күн бұрын

Yeah, web design is “awesome”.

@YoKKJoni Күн бұрын

the beauty of css is that prob none of these will work for my purpose XD

@albumin30days90 2 күн бұрын

"HOW TO CENTER A DIV"

@iub.9893 Күн бұрын

Perfect

@tediumluvs 3 күн бұрын

Finally.

@totoshampoin 6 күн бұрын

YESSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSs

@cariyaputta Күн бұрын

Failed so many interviews because of this lol

@Rovsau Күн бұрын

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?

@DevDiveIn Күн бұрын

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.

@Rovsau Күн бұрын

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

@DevDiveIn Күн бұрын

@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. kzfaq.info/get/bejne/eJyBl8eZ29a5haM.html

@wil-fri 19 сағат бұрын

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

@perfectionbox 17 сағат бұрын

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.

@zvala396 Күн бұрын

This only works with pictures of cats.

@Fido1hn Күн бұрын

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.

@beaticulous Күн бұрын

Why not content-align?

@ytchannel6569 14 сағат бұрын

why not con-align-tent?

@etherweb6796 2 күн бұрын

You could also use width 100% height 100% and object-fit also (assuming no other content in div)

@jayjaayjaaay94 2 күн бұрын

Why I see this cat picture everywhere?

@syedmuhammadhasnain5054 6 күн бұрын

Vs code theme name

@DevDiveIn 6 күн бұрын

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

@richochet 2 күн бұрын

@@DevDiveInNice, thanks!