將旋轉的文本對齊中心

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>