将旋转的文本对齐到中心

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

以下是一种涉及使用translate属性transform属性和display: table-cell的{​​{1}}函数的方法（概念证明）。

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

然后定义一个绝对定位的容器来包含标签。我修改了宽度和高度（这使事情变得更容易），然后旋转并翻译框以使其在父母中心。

最后，我在嵌套的表格单元格容器中使用了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>