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

然后文本超出单元格顶部进入标题 "Pack Overview" 和菜单。

我的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 >= 9) 和 transform: translate。

例子 http://codepen.io/anon/pen/azLmbg

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

GWT Flextable and CSS aligning rotated text along the bottom of the cell

css

gwt