2013-04-30 165 views
0

我改变一个SlickGrid头的高度,并与下面的CSS旋转头中的文本:垂直对齐SlickGrid头垂直文本

.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°旋转前左对齐)?

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

回答

1

Link to jsFiddle我玩了一会儿。基本上问题是旋转的起源是你的文本/标题的中间。由于“其他别的SOmeshing”比其他列名长得多,所以它在两侧都展现出来。无论哪种方式 - 将位置的起源更改为文本的开头解决了这个问题。然后,以中心um ... horizontally(旋转后)文本我们把40%左边距 - 在Chrome浏览器看起来不错,不完全确定为什么它不是50%。要将文本居中...... vertically(旋转后),我们只需添加-235px的文本缩进量,该缩进量由此处选择的高度决定,以适合文本,即250px