Question

我正在尝试用旋转标签编写一个栏。使用transform:rotate完成轮换。问题：width:100%在旋转之前计算，因此实际上它将设置为旋转标签高度的100％。

.tab-caption { position: absolute; width: 100%; /* width before rotation! */ top: 50%; height: 2px; /* actual text will overlap! */ margin-top: -1px; /* subtract half the height */ line-height: 0px; /* centre the text on the base line */ text-align: center; transform: rotate(90deg); white-space: nowrap; }

即使文本与div重叠，垂直居中也能正常工作。对于水平居中，这个技巧不起作用;即使指定了text-align:center，文本也始终从左侧开始。

小提琴在这里：http://jsfiddle.net/digorydoo/pzvuntd4/

在小提琴中，一切都适用于短标题，因为旋转后变为宽度的高度比标题短。对于长字幕，居中没有正确完成。如何解决这个问题？

Answer 1

实际上它非常简单：

.tab-caption {
    position: absolute;
    /* width: 100%; */ /* (remove this) width before rotation! */
    top: 50%;
    height: 2px;  /* actual text will overlap! */
    margin-top: -1px;  /* subtract half the height */
    line-height: 0px;  /* centre the text on the base line */
    text-align: center;
    left: 50%; /* added */
    transform: translateX(-50%) rotate(90deg); /* added translateX */
    white-space: nowrap;
}

演示 http://jsfiddle.net/pzvuntd4/2/

如何使用CSS居中旋转文本

1 个答案: