Blog

After working with Bootstrap for the last year I’ve come across a common problem: vertical alignment. In responsive design it would be nice to vertically center an element inside its parent, even if the height of the element or its parent varies across screen sizes.

This seems like it should be straightforward with the CSS vertical-alignment property. However, if you try to use the vertical-alignment property in Bootstrap you will find that it has no effect. This has to do with the floats and positioning that Bootstrap uses for its grid system.

In the past I’ve gotten around the vertical alignment issue with padding. But the results are imperfect, especially if you want text to center vertically no matter how many lines it takes up.

For the OKC Thunder Plus app we needed to implement a slick slider with a slide number and caption centered within a fixed footer. Since captions can vary in length I needed to figure out a solution for vertical centering.

I found several suggestions for working around the issue. For my purposes, I found that this example from ZeroSixThree did the trick. Using positioning and translate you can vertically center any element:

.vcenter {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

First I added the class to the page number and it worked! But when I added the class to the captions (inside a slick slider) the captions did not center.

This is because by default slick slides are all equal height and take on the height of the tallest element. This was easily fixed by setting the slick slider option for Adaptive height. I’ve included my slick slider settings below. I used two sliders (one for the captions and one for the photos) and used the asNavFor option so that both sliders would always be in sync. I set the adaptive height on the .captions slider to ‘true’.

        $(document).ready(function () {

            $('.slideshow').slick({
                dots: false,
                mobileFirst: true,
                asNavFor: '.captions',
                autoplay: true,
                autoplaySpeed: 5000,
                touchMove: true,
                arrows: false
            });
            
            $('.captions').slick({
                dots: false,
                mobileFirst: true,
                asNavFor: '.slideshow',
                autoplay: true,
                autoplaySpeed: 5000,
                touchMove: true,
                arrows: false,
                fade: true,
                adaptiveHeight: true
            });

            $('.slideshow').on('beforeChange', function (event, slick, currentSlide, nextSlide) {
                var slideNum = nextSlide+1;
                $('#number').html(slideNum);
            })
        });
    

You can see the slideshow in action in the OKC Thunder Plus app, which is available to download in the App Store.

Teija Stearns is a developer at 6D Creative/Mobile, focused on the creation of phone and tablet applications. In her time with 6D, Teija has earned a reputation as a whiz at finding elegant solutions within complex project frameworks. Her background in web development, combined with a degree in multimedia journalism, gives her a user-based perspective that is invaluable to the Creative/Mobile team. Teija is based in 6D Global’s Portland, OR office.