Align Img Vertically within Div HTML and CSS - html

Question

I have found the following solution for aligning an img vertically within a div
https://stackoverflow.com/a/7310398/626442
and this works great for a basic example. However, I have had to extend this and I want a row with two bootstrap col-md-6 columns in it. In the first column I want a 256px image, in the second I want a h1, p and a button. I have to following HTML:
<div class="home-costing container">
<div class="row">
<div class="frame">
<span class="helper"></span>
<div class="col-md-6">
<img src="http://www.nijmegenindialoog.nl/wp-content/uploads/in.ico" height="256" width="256" />
</div>
<div class="col-md-6">
<h2>Header</h2>
<p>
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA<br /><br/>
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
</p>
<a class="btn btn-default"
href='#Url.Action("Index", "Products")'
role="button">
Learn More
</a>
</div>
</div>
</div>
</div>
and the following CSS:
.home-costing {
color: #fff;
text-align: center;
padding: 50px 0;
border-bottom: 1px solid #ff6500;
}
.home-costing h2 {
text-transform: uppercase;
font-size: 60px;
}
.home-costing p {
font-size: 18px;
}
.home-costing .frame {
height: 256px;
width: 256px;
border: 0;
white-space: nowrap;
text-align: center;
margin: 1em 0;
}
.home-costing .helper {
display: inline-block;
height: 100%;
vertical-align: middle;
}
.home-costing img {
vertical-align: middle;
max-height: 256px;
max-width: 256px;
}
The problem is that now the second column is no longer contained and the text does not wrap and goes off to the right.
How can I center align my image in the first column with the text in the right column and still get the correct wrapping in the second column?
Fiddler: https://jsfiddle.net/Camuvingian/1sc40rm2/2/

Answer 1

Your HTML needed updated, in Bootstrap, the div order should ALWAYS go .container > .row > .col- * - *, your code however went .container > .row > .frame > .col- * - *. I have corrected your HTML and now your code works.
HTML:
<div class="home-costing container">
<div class="row">
<div class="col-md-6">
<img src="http://www.nijmegenindialoog.nl/wp-content/uploads/in.ico" height="256" width="256" class="center-block" />
</div>
<div class="col-md-6">
<h2>UserCost</h2>
<p>Hello, I'm a paragraph</p>
<a class="btn btn-default"
href='#Url.Action("Index", "Products")'
role="button">
Learn More
</a>
</div>
</div>
</div>
</div>
Link to finished code example:
Codepen - Updated & working code
This fixes the word wrap issue also on the p tag.
CSS:
p {
font-size: 18px;
word-wrap: break-word;
}