垂直对齐SlickGrid头垂直文本
问题描述:
我改变一个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;
}
为了更好的理解,请看看这个:
在标题中的旋转的文本居中和切断。如何更改对齐方式,使其从底部开始(文字应该在-90°旋转前左对齐)?
其中一列的宽度有目的不同。
答
Link to jsFiddle我玩了一会儿。基本上问题是旋转的起源是你的文本/标题的中间。由于“其他别的SOmeshing”比其他列名长得多,所以它在两侧都展现出来。无论哪种方式 - 将位置的起源更改为文本的开头解决了这个问题。然后,以中心um ... horizontally
(旋转后)文本我们把40%
左边距 - 在Chrome浏览器看起来不错,不完全确定为什么它不是50%
。要将文本居中...... vertically
(旋转后),我们只需添加-235px
的文本缩进量,该缩进量由此处选择的高度决定,以适合文本,即250px
。