Customizing Flexslider and Vertically Aligning Content
How the CSS 'flex' display, or 'Flexbox', works New!
(This one's FREE!)
In an ideal world, CSS would give us a sure-fire way to align our content vertically without having to bash our heads against a wall. In this video we explain the 'Flexbox' spec, which - among other things - gives us the ability to do just that, and how you can learn more about it.
Here we apply the Flexbox model to our slideshow content and sit back, pleased at the easy with which we were able to accomplish this task.
Having let go of the idea of the promise of Flexbox, we look into some other options for vertical alignment, starting with the deceptively named 'vertical-align' property. Ultimately, this won't work for what we need, but we get some insight into why.
In previous vertically aligned elements, we've used the 'line-height' property. In this case, however, that's not going to work. Onward!
We've sure made it a long way in this series without discussing tables. In this video we talk through the basic HTML table syntax, and explain why table cells have historically been a go-to solution for challenging layout issues.
With modern CSS, we can make any element behave like any other element. Here we look at using the 'table-cell' display value to attempt yet another go at getting vertical alignment to work.
In this video we continue exploring various solutions to issue of vertically aligning an element. This one uses position and margin, and works well for a single group of elements, but not as great for multiple slides in a sider.
How to use a CSS transform to vertically align an element New!
(This one's FREE!)
After working through number vertical alignment solutions, we've finally come to the one that's most ideal for our situation. In this video we use a CSS 'transform' to position the element halfway down its container. Nice.
As with most of the newer CSS properties, it's good to check out browser support before we standardize on a solution that uses them. In this video we hop over to caniuse.com to see how we're doing for support of the 'transform' property. Spoiler: Prospects look good.