自定义 jQuery 图表中的文本对齐答案

【问题标题】：Text alignment in custom jQuery chart自定义 jQuery 图表中的文本对齐
【发布时间】：2014-05-06 13:30:41
【问题描述】：

我的页面运行良好，而且大部分看起来都很棒。我遇到的最大问题是列标题中的旋转文本未对齐。我如何去“地板”文本。正如您在小提琴中看到的那样，它从盒子的中间开始并超出界限。我想把它从盒子的底部开始，但不知道怎么做。

我的旋转功能运行良好，并按照我需要的方式保持列宽。

.r90 span {
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
    font-family:verdana;
    display:inline-block;
    white-space:nowrap;
    width: 30px;
}

我的领域 css 拉长了它。

th {
 height: 550px;
}

http://jsfiddle.net/michaela_elise/CFNHP/

那么我在哪里以及如何调整文本的位置？我一辈子都想不通：P

【问题讨论】：

标签： jquery alignment css-tables

【解决方案1】：

您只需要在容器上指定垂直对齐方式：

.r90 {
    vertical-align: bottom;
}

您还可以在<span> 元素的左侧添加一些填充，以便在容器和文本之间留出一些空间：

.r90 span {
    padding-left: 1em;
}

你会发现一个更新的小提琴here。

【讨论】：