Question

我正在修改Chris Callison-Burch的亚马逊机械特克斯字对齐用户界面（https://github.com/callison-burch/mechanical_turk_workshop/wiki/word-alignment或http://cs.jhu.edu/~ccb/interface-word-alignment.html），以便它不会将图像用于旋转的源词。我已经成功地旋转了源（英语）单词，但是我无法正确对齐它们。我希望桌子周围有文字，所以顶部的英文单词应该与表格的顶部对齐，底部的单词应该与表格的底部对齐。基本上，我希望它看起来像这个页面（http://cs.jhu.edu/~ccb/interface-word-alignment.html）但是使用旋转的文本而不是旋转的图像。

您可以在此处查看代码：http://jsfiddle.net/BqTJe/

具体来说，我正在使用以下CSS类来旋转单词：

.rotated { 
    display: block; 
    position: relative; 
    width: 20px; 
    -webkit-transform: rotate(-90deg); 
    -moz-transform: rotate(-90deg); 
    -o-transform: rotate(-90deg);
}

提前感谢您的帮助！

Answer 1

我在www.reddit.com/r/css上问了这个问题，这就是我得到的（感谢www.reddit.com/u/dangoodspeed！）

首先，您将以下行添加到css：

table { border-collapse:collapse; margin:100px auto;}
td { border:2px solid white; min-width:20px; min-height:20px;}
table tr:last-child td { overflow:hidden; height:100px; max-width:20px;}
table tr:last-child td div { display:block; text-align:right; width:100px; height:20px; positon:relative; left:-40px;}

然后用div而不是span包装表格底部的文本。

您可以在此处查看固定版本：http://jsfiddle.net/BqTJe/12/

注意：单词不能超过100px。

无法对齐通过CSS旋转的文本

1 个答案: