html - 水平对齐旋转的文本

Question

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

这是一个演示问题的小提琴。提前致谢。

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;
}