I'm looking to align two columns in a specific way:
- When they are on the same line (if the screen size allows) I want them to be vertically aligned. The shorter column should be centered within the taller one.
- If the screen shrinks and the columns stack, they should both be horizontally centered.
To achieve this, I have utilized a grid system with an image (col-md-4) and text (h4) in separate columns (col-md-8). When the screen width is md or larger, the text should be vertically centered next to the image. But when the screen is sm or xs, I want everything to be horizontally centered within the container.
<div class="container-fluid">
<div class="row">
<div class="col-md-4"><img class="center-block img-responsive" src="foo.png" alt="foo" width="190" height="160" /></div>
<div class="col-md-8">
<h3>Foo image description</h3>
</div>
</div>
Any suggestions on how to achieve this alignment would be greatly appreciated!
For a sample of what I'm trying to achieve, you can view it here: http://jsbin.com/lisetahupa/edit?html,output