[英]Alignment of rotated text
我面临着垂直旋转文本的问题。 我已经在这里和这里看过了 ,但是仍然无法调整我的代码片段以使其正常工作。
我正在尝试使垂直文本在两个div的中心对齐并保持相等的高度。
<div class="wrapper">
<div class="vertical">
<span class="vertical-text">short title</span>
</div>
<div class="horizontal">
long text
</div>
</div>
和当前的CSS:
.wrapper {
display: inline-table;
}
.vertical {
display: table-cell;
}
.vertical-text {
display: inline-block;
transform: rotate(-90deg);
white-space: nowrap;
}
.horizontal { display: table-cell; }
这是指向Plunker的链接。
您可以将.vertical
css类添加以下行:
vertical-align: middle;
它将使您的文字垂直对齐。
所以您的课程应该是这样的:
.vertical {
display: table-cell;
vertical-align: middle;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.