Html 垂直对齐中间与引导响应网格

我有一个非常简单的问题，关于垂直中间a

span

使用Bootstrap 2.3.2

要求：

有两列，左边的列有一个固定的高度300px，因为里面有300x300的图像

右栏有文本，必须基于左栏居中

整个事情必须是有反应的。这就是为什么我使用响应图像

如果第二列向下，则其高度必须适合文本的大小。这意味着我不能在第二列上设置固定高度

不能使用JS来解决此问题

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>

.v-center {
    display:table;
    border:2px solid gray;
    height:300px;
}

.content {
    display:table-cell;
    vertical-align:middle;
    text-align:center;
}

我的代码：

您可以看到我在上面所做的：我基本上将第二列

span

设置为table，并将

中间
设置为
.content
table单元格。我在这里复制了这个方法（这里有工作示例）

由于以上要求，我的挑战有些不同。你知道怎么做吗？谢谢。
添加
！重要信息
显示规则：您的
.v-center
类的表

.v-center {
    display:table !important;
    border:2px solid gray;
    height:300px;
}

您的显示属性正被引导覆盖到
display:block


注意：.col-md-4可以是任何网格列，这里只是一个示例。
第二列的固定高度不符合上面的#4，因为它的高度应该缩小以适应文本大小的高度。更不用说我计算出来了。只需在移动媒体查询中设置高度：自动
显示：表格单元格
；请尝试使用
display:block
.row {
    letter-spacing: -.31em;
    word-spacing: -.43em;
}
.col-md-4 {
    float: none;
    display: inline-block;
    vertical-align: middle;
}