如何垂直居中div的内容？

Question

我想通过固定高度来制作内容垂直对齐中心。我试过下面的css，但没有奏效。我不想使用绝对位置方法来使用并且无法更改标记。

row-fluid{display: table;}

.span7{
    display: table-cell;
    vertical-align: middle;
}

HTML：

<div class="row-fluid">
<div class="span7 paddingL10Pct">
 <div class="carou-title">Pan India search</div>
 <div class="carou-sub-title">Search properties by <span>City</span>, <span>Locality</span> or <span>Builder.</span></div>
  </div>

<div class="span5 paddingR15Pct">
  <div class="pull-left"><img src="http://placehold.it/250x500"></div>
                        </div>

</div>

CSS：

.carou-title {
    color: #f68500;
    font-family: "open-sans",Arial,Helvetica,sans-serif;
    font-size: 54px;
    font-weight: 300;
    line-height: 70px;
}
.span7{
  border:red solid 1px; float:left;
  }
.span5{ flaot:right;}
.carou-sub-title {
    color: #2e2e2e;
    font-family: "open-sans",Arial,Helvetica,sans-serif;
    font-size: 26px;
    font-weight: 100;
    line-height: 34px;
    margin-bottom: 0;
}

.row-fluid{ border:black solid 1px; width:800px; margin:0 auto; overflow: hidden;}

离。 http://codepen.io/anon/pen/CAfGq