How to vertically center a floating element of unknown height in Bootstrap? - html

Question

Related Bootply: http://www.bootply.com/OdVIzrxTV5
I am creating a layout in Bootstrap where sections stack atop one another on mobile:
|---|
| A |
|---|
| B |
|---|
| C |
|---|
but split apart on desktop:
|---| |---|
| B | | A |
|---| |---|
| C |
|---|
I am using .pull-right on sections A and C to do the job, but because Bootstrap is using float, section B is automatically aligned to the top as seen above. What I really want is for section B to be vertically centered like this:
|---|
|---| | A |
| B | |---|
|---| | C |
|---|
Section B should be vertically centered with respect to A and C. I've tried applying flexbox on the row, but that disrupts the layout. I've also tried various other CSS hacks but none seemed to work correctly in a responsive manner, disrupting the layout on either mobile or desktop.
Is there any reliable, responsive solution to vertically center section B when it is of unknown height? If it helps, section B is going to be an image element.

Answer 1

What other CSS hacks have you tried? Just curious as I know when working the factory version of Bootstrap (no sass/less) you really do have to be picky with the CSS selectors.
That being said, perhaps a JavaScript approach might help! Here's the code, I'll walk you through some changes you could make to suit your needs.
Variable breakpoint
Change this variable to whatever pixels are set for your breakpoint. For Bootstrap the xs selector kicks in at 768 by default. You could add multiple breakpoints and use more if/else statements if you wanted to do things at other breakpoints.
First if
This will trigger when the page loads and will immediately test what the width of your screen is and change the margin if need be.
window.resize()
Anytime the window is resized a similar if statement goes off and re-calculates the margin. If you throw some text in and change the height, you'll see that it stays centred. If for some reason the browser is resized below the breakpoint, the margin is simply changed to inherit.
Some Changes
You might notice that the div is a little lower than half. This is probably just a math error on how jQuery is retrieving the height. Simply add whatever constant you want to edit it up or down.
// Where 20 is in pixels
var topMargin = (totalMargin / 2) - 20;
If you wanted to center the left div so it's always in-between sections A and C you would just have to change the topMargin calculation to use the height of the A div.
If you have any questions let me know!
$(document).ready(function() {
var breakpoint = 768;
if ($(window).width() > breakpoint) {
var totalMargin = $(window).height() - $('#vertCenter').height();
var topMargin = totalMargin / 2;
$('#vertCenter').css('margin-top', topMargin);
}
$(window).resize(function(){
if ($(window).width() > breakpoint) {
var totalMargin = $(window).height() - $('#vertCenter').height();
var topMargin = totalMargin / 2;
$('#vertCenter').css('margin-top', topMargin);
} else {
$('#vertCenter').css('margin-top', 'inherit');
}
});
});
.section-a,
.section-c {
font-size: 2em;
}
.section-b {
font-size: 4em;
}
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container">
<div class="row">
<div class="test"></div>
<div class="col-xs-12 col-sm-6 pull-right">
<div class="section-a well well-lg">A</div>
</div>
<div class="col-xs-12 col-sm-6">
<div id="vertCenter" class="section-b well well-lg">B</div>
</div>
<div class="col-xs-12 col-sm-6 pull-right">
<div class="section-c well well-lg">C</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>