javascript - 似乎无法将已翻译 270 度的文本水平居中？

Question

所以我们有这些带有“垂直标题”的 HTML 表格。我们正在使用 css3 translate 属性来旋转文本。所有这一切都很好用，除了我找不到正确地水平居中文本的方法。我当然可以使用填充、边距或其他几个属性手动将文本居中，但这仅在所有垂直标题单元格的宽度都相同时才有效，但情况并非如此。

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

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>

Answer 1

添加

margin: 0 auto;

在 .vert 上水平居中文本。

查看更新 JSFiddle .