将旋转的文本对齐中心

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属性的translate函数和display: table-cell。

首先，在父容器上使用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>