Vertical align middle with Bootstrap responsive grid

I have a very simple problem on vertical middle a `span` using Bootstrap 2.3.2. Requirements: There are two columns, left column has a fixed height 300px because there is 300x300 image inside. Right column has text and must be centered based on left column. The whole thing must be responsive. That's why I am using responsive image. If the second column goes down to bottom, its height must fit the size of text. That means I cannot set fixed height on the second column. Must not use JS to solve this. HTML: ``` <div class="container-fluid"> <div class="row-fluid"> <div class="span6"> <img class="img-responsive" src="http://placehold.it/300x300"/> </div> <div class="span6 v-center"> <div class="content"> <h1>Title</h1> <p>Paragraph</p> </div> </div> </div> </div> ``` CSS: ``` .v-center { display:table; border:2px solid gray; height:300px; } .content { display:table-cell; vertical-align:middle; text-align:center; } ``` My code: http://jsfiddle.net/qhoc/F9ewn/1/ You can see what I did above: I basically set the second column `span` as table and `middle` the `.content` table-cell. I copied that method here How to use vertical align in bootstrap (with working example here http://jsfiddle.net/lharby/AJAhR/) My challenge is a bit different due to requirements above. Any idea on how to make it work? Thanks.