vertical align text next to responsive image each in .col-md-* - twitter-bootstrap-3

Question

Tried two approaches to achieve vertical align text next to responsive image each in a separate .col-md-*
on the child element
.vcenter {
min-height: 400px;
display: table-cell;
vertical-align: middle;
border: 1px solid red;
float: none;
}
and a parent child using table-cell method
.parent {
display: table;
}
.child {
display: table-cell;
vertical-align: middle;
}
but as image on left is responsive how do I get to work without a fixed height.
fiddle : https://jsfiddle.net/silko/jr3b8kL5/13/

Answer 1

just add line-height: 400px; to your .child class it will make the text vertically centered.
Note: you can use calc and vw and vh to make it flexible, e.g. line-height: calc(30vw + 30vh);
.vcenter {
min-height: 400px;
display: table-cell;
vertical-align: middle;
border: 1px solid red;
float: none;
}
.parent {
display: table;
}
.child {
display: table-cell;
vertical-align: middle;
}
p{
display: table-cell;
height: 400px;
vertical-align: middle;
}
<div class="col-sm-6">
<picture><img src="http://placehold.it/400x400" class="ccm-image-block img-responsive bID-214"></picture>
</div>
<div class="col-sm-6">
<div class="parent">
<div class="ccm-custom-style-main49 child">
<p>vertical center text when more than one lineihfoiwvowiWOiehfiwhfpwHFPwofhpofhpfhpifhhvciuvcivuwcviwucvwicuwvcwiucvcwuicvwicvwicuwvcwicuvwicuvwicvwciuwcviwcuwv</p>
</div>
</div>
</div>
</div>
Update: if your text contains multiple lines then you should set the text container's display property to table-cell and then you can set vertical-align: middle.