水平对齐旋转的文本

Question

我想将一些已旋转90度和270度的文本（遵循建议here）与其相邻div（其高度可在我的应用程序中更改）水平居中对齐。一些常用的技巧似乎不起作用，因为元素是水平创建和处理的，然后旋转。

这是展示问题的fiddle。提前谢谢。

HTML：

<div class="col-xs-1">
  <div class="vertical_left">
    <h3>Text to align</h3>  <!-- horizontally center this to the following div -->
  </div>
</div>

<div class="col-xs-10">
</div>

CSS：

.vertical_left{
    -webkit-transform:rotate(270deg);
    -moz-transform:rotate(270deg);
    -o-transform: rotate(270deg);
    -ms-transform:rotate(270deg);
    transform: rotate(270deg);
    white-space:nowrap;
    display:block;
}