垂直對齊SlickGrid頭垂直文本

Question

我改變一個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°旋轉前左對齊）？

其中一列的寬度有目的不同。

Answer 1

Link to jsFiddle我玩了一會兒。基本上問題是旋轉的起源是你的文本/標題的中間。由於「其他別的SOmeshing」比其他列名長得多，所以它在兩側都展現出來。無論哪種方式 - 將位置的起源更改爲文本的開頭解決了這個問題。然後，以中心um ... horizontally（旋轉後）文本我們把40%左邊距 - 在Chrome瀏覽器看起來不錯，不完全確定爲什麼它不是50%。要將文本居中...... vertically（旋轉後），我們只需添加-235px的文本縮進量，該縮進量由此處選擇的高度決定，以適合文本，即250px。