Vertical Align Middle

http://codepen.io/jamesbcn/pen/mOGbXp

I’m trying to vertically align my quote box but it’s not happening. I’ve tried changing the background of the div as well as adding a border to get a better understanding of what is happening but that won’t work either…

Any help appreciated, thanks.

Flexbox to the rescue. via http://stackoverflow.com/questions/20547819/vertical-align-with-bootstrap-3

Add this class to the row wrapping the quote and image

.vertical-align {
    display: flex;
    align-items: center;
}
2 Likes

That’s great, thanks.

I notice now though that the text is no longer dropping below the image when the width of the browser is reduced. Could this be resolved??

Again, any help appreciated.

just add a media query

@media( min-width: 992px){
.vertical-align {
    display: flex;
    align-items: center;
}
}

Edit: updated breakpoint size

2 Likes