Join Jen Kramer for an in-depth discussion in this video Centering columns, part of Learning Foundation 5.
So, in the last video, we saw how we used offsets to create space between columns.…But, you may be thinking at this point, maybe you could…use an offset to kind of center something on the page.…But, in fact, Foundation offers a way of centering one of these…grid systems in a row on your page, which is really wonderful.…The key here, though, is to remember that the centering is…going to revert to the containing element to which the class is applied.…As in, center the div on that row, or center the heading tag.…
It's not going to refer to the text within the div.…If you want to center the text, you're going to need to…add a custom style to make the text itself center, but…what this is going to do is, you can set a width…for that particular row on the page and then center that.…And, I'm going to show you how to do that right now.…So, if you scroll all the way down to the bottom here to line number 40 again.…We have down here this div that's taking up twelve columns on our page.…This is probably the best candidate for centering something.…
- Downloading and installing Foundation 5
- Introducing grids
- Centering columns
- Nesting grids
- Styling text, lists, buttons, panels, and more
- Adding navigation bars and dropdown menus
- Creating a responsive lightbox
- Adding an image carousel
- Integrating responsive images
- Adding tooltips
Skill Level Beginner
CSS: Transitions and Transformswith Joseph Lowery2h 25m Intermediate
1. Overview of Foundation 5
2. The Grid System in Foundation
3. CSS Overview
4. Navigation Systems
Next steps1m 24s
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.