html - Vertically align middle without knowing the height -

<div class="grid-960">     <div class="row content">         <div class="col col-6-12">             <img src="imgs/image.jpg" alt="img"/>         </div>         <div class="col col-6-12 last">             <h2>title1</h2>             <p>my content</p>         </div>     </div> </div> 

my problem:

yes know how vertically align content. i've used many techniques, example setting parent table , child table-cell. techniques requires me either know height of parent/child - or assume working block element.

i working floated element, , don't know height of it(dynamic content).

.col{float:left} 

basically need elements on right col vertically align image on left. because columns float left, 100% height have no effect.

any ideas?

*by way, not sure why code never display's correctly here. can't seem indents work.

you can using jquery:

(function ($) {     // vertically align function     $.fn.valign = function() {         return this.each(function(i){             var ah = $(this).height();             var ph = $(this).parent().height();             var mh = math.ceil((ph-ah) / 2);             $(this).css('margin-top', mh);         });    }; })(jquery);  $('.classname').valign(); 

source: http://atomiku.com/2012/02/simple-jquery-plugin-for-vertically-centering/

update

possible css solution: jsfiddle

<div class="parent">     <div class="child">lorem ipsum dolor sit amet, consectetur adipisicing elit. numquam blanditiis optio aliquam voluptas adipisci itaque repellendus voluptatum magni vel nam sequi hic voluptatem perferendis deleniti labore aliquid incidunt officiis magnam.</div> </div>  .parent {     width:300px;     padding:50% 0;     border:1px solid black;     float:left; } .child {     margin:0 auto;     border:1px solid black; }