垂直对齐 SlickGrid 标题中的垂直文本答案

【问题标题】：Vertically align vertical text in SlickGrid header垂直对齐 SlickGrid 标题中的垂直文本
【发布时间】：2013-04-30 14:01:28
【问题描述】：

我正在更改 SlickGrid 标题的高度并使用以下 CSS 旋转标题中的文本：

.slick-column-name {
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    transform: rotate(-90deg);

    -webkit-transform-origin: 50% 50%;
    -moz-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    -o-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
}
.slick-header-columns, .slick-header-column {
    height: 200px !important;
}

为了更好的理解，请看这个：

http://jsfiddle.net/2Nvc3/1/

标题中的旋转文本居中并被切断。如何更改对齐方式，使其从底部开始（文本应在 -90° 旋转之前左对齐）？

其中一列的宽度是故意不同的。

【问题讨论】：

重复stackoverflow.com/questions/9917916/…

标签： header vertical-alignment slickgrid vertical-text

【解决方案1】：

Link to jsFiddle我玩了一会儿。基本上问题是旋转的原点是你的文本/标题的中间。由于“Else else SOmeshing Else”明显长于其他列名，因此它在两侧都突出。无论哪种方式 - 将位置的原点更改为文本的开头都可以解决此问题。然后居中嗯...horizontally（在旋转之后）我们在40% 的左边放置一个margin-left 的文本——至少在Chrome 中看起来不错，不完全确定为什么它不是50%。为了使文本居中 um...vertically（在旋转之后），我们只需添加 -235px 的文本缩进，这是由此处选择的适合文本的高度决定的，即 250px。

【讨论】：