可以't似乎将已翻译的文本水平居中270度

所以我们有这些带有"垂直标题"的HTML表。我们使用css3 translate属性来旋转文本。所有这些都很有效，只是我找不到一种方法来正确地将文本水平居中。当然，我可以使用填充、边距或其他一些属性手动将文本居中，但只有当所有垂直标题单元格的宽度相同时，这才有效，而事实并非如此。

我在JS fiddle中创建了一个测试用例，其中有一个方便的滑块，用于动态调整其中一列的宽度：

http://jsfiddle.net/c7ft8nzc/

以防万一，这是我正在使用的代码示例。

HTML:

<table>
    <tr class="header">
        <td>A header</td>
        <td>Some Other header</td>
        <td id="v"><div class="vert">A Vert. Header</div></td>
        <td><div class="vert">Another Vert. Header Here</div></td>
    </tr>
    <tr>
        <td>Content here</td>
        <td>Here is some longer content that will likely break into multiple lines</td>
        <td>X</td>
        <td>Y</td>
    </tr>
    <tr>
        <td>More Content here</td>
        <td>Here is some other content</td>
        <td>A</td>
        <td>B</td>
    </tr>
    <tr>
        <td>One more row here</td>
        <td>Other stuff</td>
        <td>A</td>
        <td>B</td>
    </tr>
</table>
<div>
    <p>Adjust slider to change the width of the first vertical header</p>
    <div id="slider"></div>    
</div>

CSS:

<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.3/css/base/jquery-ui.css">
<style>
table{
    border-collapse: collapse;
    width: 400px;
}
td{
    border: 1px solid black;
    padding: 4px;
    vertical-align:top;
}
.header{
    height: 200px;
}
.header td{
    vertical-align:bottom;
    font-weight:bold;
}
.vert{
    height:21px;
    width:12px;
    white-space:nowrap;
    -webkit-transform:translate(-4px, 20px) rotate(270deg);
    -webkit-transform-origin:0 0;
    -moz-transform:translate(-4px, 20px) rotate(270deg);
    -moz-transform-origin:0 0;
    -ms-transform:translate(-4px, 20px) rotate(270deg);
    -ms-transform-origin:0 0;
    -o-transform:translate(-4px, 20px) rotate(270deg);
    -o-transform-origin:0 0;
    transform:translate(-4px, 20px) rotate(270deg);
    transform-origin:0 0;
}
#v{
    width:40px;
}
#slider{
    width:400px;
}
</style>

JS:

<script type='text/javascript' src='http://code.jquery.com/jquery-git2.js'></script>
<script type='text/javascript' src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script>
$(function() {
    var s = $( "#slider" ).slider({
        min: 12,
        max: 100,
        value: 40,
        change: function( event, ui ) {
            $("#v").width(s.slider( "option", "value" ) + 'px');
        },
    });
});
</script>