Submission shoutout for CENTERING
Key Takeaways
The video discusses various CSS centering techniques, including flexbox, text-align, and fit-content, and showcases a submission from Chris Coyier of CSS-Tricks, highlighting different approaches to centering in CSS.
Full Transcript
so y'all today we are going to be checking out a submission shout out except today's is a little bit of a different submission they didn't glitch or respond directly on twitter they made a whole blog post [Music] here's the article centering in css you can find it here csstrix.com kind of just goes over my article and calls out my winning solution which was gentle flex right for me this was the one that sort of just did what it was supposed to that solution always works really great for me and i like what he calls out here in the follow up which is say uh you're not always in these extreme situations maybe vertical centering isn't even the type of centering that you're looking for let's check out some alternatives essentially like just for fun like right let's look at another situation so this is inline elements let's say you want to just center some inline elements he's got a handy one liner here for you text line center and it works great right check it out over here we have a header it's so it's parent owned centering right so there'd be a pink border around this one and it's a one-liner text-align center and all the text that's inside there will be in the center pretty cool it also works on uh in-line elements like anchors so as long as the ch children that are inside of here uh are in line they'll be centered in line that's kind of cool i like this follow-up conversation here about fit content he solves uh well what if this nav needs to just shrink wrap its content you only want it to be as wide as its content and it should still be in the center like what do i need to do that well and he calls out you can use this one really cool uh width property called fit content in this demo you see that fit content changes the width of the element while it's still a block level element right if i duplicate this we still get another one underneath and that's because the nav its display mode has not been changed it is still a full width block right but now its width its painted size is going to be the max fit content and that's going to give you that effect right there where it's essentially in the center still in a block but it's painted spaces fit to the content it's a very cool uh solution and a way to think about it so anyway i love this response not everyone is centering in sort of scenarios like this and sometimes text align center is all you need i'm waiting for more responses show me how you center where's the display table example where's um you know vertical align middle where's uh show me there's so many other ways and i want to see the ways that you center sharing with everyone else so they all can know and i will talk to you later on the next episode see y'all bye you
Original Description
We stress tested 5 different CSS centering techniques and I challenged you to submit your own. Shout out to Chris Coyier from CSS-Tricks for sharing his own tricks! Do you have another way you’d center in CSS? Send it our way!
Watch the GUI Centering episode → https://goo.gle/39d9Rwb
Check out Chris’s blog post → http://goo.gle/3nrVCZo
Code along → https://goo.gle/3qEIaE8
Read along → https://goo.gle/39NHC9a
Try a demo → https://goo.gle/33PIW7A
Subscribe to Google Chrome Developers → http://goo.gl/LLLNvf
#GUIChallenges #GUIsubmissions
Watch on YouTube ↗
(saves to browser)
Sign in to unlock AI tutor explanation · ⚡30
Playlist
Uploads from Chrome for Developers · Chrome for Developers · 0 of 60
← Previous
Next →
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
Polymer Performance Patterns (The Polymer Summit 2015)
Chrome for Developers
Polymer Power Tools (The Polymer Summit 2015)
Chrome for Developers
Chrome Dev Summit 2014 – Chrome Case Studies
Chrome for Developers
Web Directions Code 2015 round up
Chrome for Developers
Maintainable Code - HTTP203
Chrome for Developers
iron-ajax… wat?! -- Polycasts #26
Chrome for Developers
The Guardian - Supercharged
Chrome for Developers
ES2015 (next version of JavaScript), Totally Tooling Tips (S2 Ep1)
Chrome for Developers
#AskPolymer: Rob answers all the questions ever -- Polycasts #27
Chrome for Developers
The Future of JavaScript - HTTP203
Chrome for Developers
Data Binding 101 -- Polycasts #28
Chrome for Developers
The Guardian part 2 - Supercharged
Chrome for Developers
The Future of Web Audio: with Chris Wilson and Chris Lowis
Chrome for Developers
Chrome 46: New motion-path animations, client hints and service worker improvements
Chrome for Developers
Sublime Snippets, Totally Tooling Tips (S2 Ep2)
Chrome for Developers
#AskPolymer: How do you make the show? -- Polycasts #29
Chrome for Developers
Critical Path CSS, Totally Tooling Tips (S2 Mini Tip #1)
Chrome for Developers
Binding to Objects -- Polycasts #30
Chrome for Developers
Player FM - Supercharged
Chrome for Developers
Where’s the Designer? #AskPolymer -- Polycasts #31
Chrome for Developers
Jake Beats Wikipedia - HTTP203
Chrome for Developers
Supercharged Observers! -- Polycasts #32
Chrome for Developers
Jai's Web blog - Supercharged
Chrome for Developers
Windows Command-line Tooling, Totally Tooling Tips (S2, Ep4)
Chrome for Developers
What about internationalization? #AskPolymer -- Polycasts #33
Chrome for Developers
Developing for Billions (Chrome Dev Summit 2015)
Chrome for Developers
Google+ Performance Improvement Comparison
Chrome for Developers
Deploying HTTPS: The Green Lock and Beyond (Chrome Dev Summit 2015)
Chrome for Developers
Progressive Web Apps (Chrome Dev Summit 2015)
Chrome for Developers
Instant Loading with Service Workers (Chrome Dev Summit 2015)
Chrome for Developers
Increase Engagement with Web Push Notifications (Chrome Dev Summit 2015)
Chrome for Developers
Engaging with the Real World: Web Bluetooth and Physical Web (Chrome Dev Summit 2015)
Chrome for Developers
Asking for Permission: respectful, opinionated UI (Chrome Dev Summit 2015)
Chrome for Developers
Polymer - State of the Union (Chrome Dev Summit 2015)
Chrome for Developers
Building Progressive Web Apps with Polymer (Chrome Dev Summit 2015)
Chrome for Developers
Introduction to RAIL (Chrome Dev Summit 2015)
Chrome for Developers
DevTools in 2015: Authoring to the max (Chrome Dev Summit 2015)
Chrome for Developers
RAIL in the real world (Chrome Dev Summit 2015)
Chrome for Developers
#ChromeDevSummit talks are up - W00T! -- Polycast #34
Chrome for Developers
V8 Performance from the Driver's Seat (Chrome Dev Summit 2015)
Chrome for Developers
Quantify and improve real-world RAIL (Chrome Dev Summit 2015)
Chrome for Developers
Owning your performance: RAIL (Chrome Dev Summit 2015)
Chrome for Developers
HTTP/2 101 (Chrome Dev Summit 2015)
Chrome for Developers
Leadership Panel (Chrome Dev Summit 2015)
Chrome for Developers
Build Processes, Totally Tooling Tips (S2, Ep 5)
Chrome for Developers
Accessibility (Chrome Dev Summit 2015)
Chrome for Developers
Binding to Arrays -- Polycasts #35
Chrome for Developers
HTTP2 - HTTP203
Chrome for Developers
Chrome 47: Splash Screens, requestIdleCallback and better desktop notifications (New in Chrome)
Chrome for Developers
Call For Submissions - Supercharged
Chrome for Developers
Cross Device Testing, Totally Tooling Tips (S2 Ep6)
Chrome for Developers
Testing AJAX with Web Component Tester -- Polycasts #37
Chrome for Developers
Slack: Extended Xmas Special - Supercharged
Chrome for Developers
Browser testing with Travis & Sauce Labs -- Polycasts #38
Chrome for Developers
Optimize for production with Vulcanize -- Polycasts #39
Chrome for Developers
Highlights from Chrome Dev Summit 2015
Chrome for Developers
Chrome 48: Custom buttons in notifications, DevTools Security panel, and Presentation mode
Chrome for Developers
Crisper: Protecting your Polymer app with CSP -- Polycasts #40
Chrome for Developers
How do I use Sass with Polymer? #AskPolymer -- Polycasts #41
Chrome for Developers
Colors – DevTools Tonight #0 (Pilot)
Chrome for Developers
More on: HTML & CSS
View skill →
🎓
Tutor Explanation
DeepCamp AI