将旋转的文本对齐中心
问题描述:
是否可以将旋转的文本对齐到中心?将旋转的文本对齐中心
例如这里:
虐待尝试使用:
.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 }
但是,当文本具有一个换行符,我没有机会,将其调整到中心。
任何想法?
答
下面是一个方法(概念验证),其中涉及使用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>
你可以做一个片段或至少它的jsfiddle? – MightyPork 2015-01-21 11:40:19
当然,我会在稍后创建 – derdida 2015-01-21 12:20:20