GWT Flextable和CSS对齐单元格底部的旋转文本

Question

我正在尝试在GWT flextable中对齐文本，文本旋转-90度，以便它在单元格的底部对齐。我正在使用的代码示例是（此行中的所有单元格都是相同的高度）：

Label lblLeadership = new Label("Leadership Course");
            lblLeadership.setStyleName("gwt-Rotate");
            flexTable.setWidget(0, 1, lblLeadership);
            flexTable.getCellFormatter().setHeight(0, 1, "200px");
            flexTable.getCellFormatter().setHorizontalAlignment(0, 1, HasHorizontalAlignment.ALIGN_CENTER);
            flexTable.getCellFormatter().setVerticalAlignment(0, 1, HasVerticalAlignment.ALIGN_BOTTOM);

但是，这会导致文本按照以下方式延伸到单元格的底部： 如果我使用：

flexTable.getCellFormatter().setVerticalAlignment(0, 1, HasVerticalAlignment.ALIGN_MIDDLE);

文本在中间对齐;但是，这看起来不太好。

如果我使用：

flexTable.getCellFormatter().setVerticalAlignment(0, 1, HasVerticalAlignment.ALIGN_TOP);

然后文本越过单元格的顶部进入标题＆＃34;包装概述＆＃34;和菜单。

我的CSS是：

.gwt-Rotate {
    color: Black;
    font-size: 12px;
    font-style: normal;
    font-family: Arial;
    font-weight: bold;
    /* Safari */
    -webkit-transform: rotate(-90deg);
    /* Firefox */
    -moz-transform: rotate(-90deg);
    /* IE */
    -ms-transform: rotate(-90deg);
    /* Opera */
    -o-transform: rotate(-90deg);
    /* Internet Explorer */
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

有没有办法让文本在单元格的底部很好地对齐？

非常感谢您的帮助。

此致

格林

Answer 1

尝试使用transform-origin（IE＆gt; = 9）和transform: translate。

实施例 http://codepen.io/anon/pen/azLmbg