将旋转的文本对齐到中心

Question

是否可以将旋转的文本居中对齐？

例如这里：

请尝试使用：

.accordion div.image .title {
    bottom: -15px;
    color: #fff;
    display: block;
    font-size: 16px;
    max-height: 200px;
    position: absolute;
    transform: rotate(270deg);
    transform-origin: 0 0 0;
    white-space: normal;
    left: 20px; // this is only the way to center it from left corner }

但是，当文本有换行符时，我没有机会将其与中心对齐。

有任何想法吗？

Answer 1

这是一种方法（概念验证），涉及使用transform属性和display: table-cell的translate功能display: table-cell 。

首先，在父容器上使用display: inline-block缩小以适合图像尺寸（或者，如果可以，请指定固定尺寸）。

然后，您定义一个绝对定位的容器来包含标签。 我固定了宽度和高度（这使事情变得更容易），然后旋转并平移该框以使其在父级中居中。

最后，我在嵌套的表格单元容器vertical-align: middle使用了vertical-align: middle ，以允许多行文本保持居中。

如果要将其添加到预先存在的HTML / CSS结构（手风琴？）中，则需要使CSS非常具体，以免破坏其他CSS样式。

您可能仍需要进行一些调整，具体取决于您希望标签底部的放置方式等。

 .image { position: relative; border: 1px dashed blue; display: inline-block; } .image img { display: block; } div.cell { display: table-cell; text-align: left; vertical-align: middle; } div.image .title { font-size: 16px; white-space: normal; color: #fff; display: table; border: 1px dotted blue; position: absolute; bottom: 0%; left: 0%; transform: rotate(270deg) translate(50%,50%); transform-origin: 50% 50% 0; width: 300px; height: 100px; margin-left: -50px; } 

 <div class="image"> <img src="http://www.placehold.it/300x400"> <div class="title"><div class="cell">The title text that can span two lines or more in a box<div></div> </div>