使用CSS垂直居中旋转文本 [英] Vertically center rotated text with CSS
问题描述
我有以下HTML:
I have the following HTML:
<div class="outer">
<div class="inner rotate">Centered?</div>
</div>
div.outer
。 div.inner
旋转90度。我想要的文本居中?以在其容器div中居中显示。我不知道事先提供的div的大小。
div.outer
is a narrow vertical strip. div.inner
is rotated 90 degrees. I would like the text "Centered?" to appear centered in its container div. I do not know the size of either div in advance.
这很接近: http://jsfiddle.net/CCMyf/2/ 。你可以从jsfiddle看到,在应用 transform:rotate(-90deg)
样式之前,文本是垂直居中的,但有点偏移。当 div.outer
很短时,这是特别明显的。
This comes close: http://jsfiddle.net/CCMyf/2/. You can see from the jsfiddle that the text is vertically centered before the transform: rotate(-90deg)
style is applied, but is somewhat offset after. This is particularly noticeable when div.outer
is short.
的尺寸提前?我还没有找到任何值 transform-origin
来解决这个问题。
Is it possible to center this text vertically without knowing any of the sizes in advance? I haven't found any values of transform-origin
that solve this problem.
推荐答案
关键是将顶部和左边的位置设置为50%,然后将transformX和transformY设置为-50%。
The key is to set position top and left to 50% and then transformX and transformY to -50%.
.inner {
position: absolute;
top: 50%;
left: 50%;
}
.rotate {
transform: translateX(-50%) translateY(-50%) rotate(-90deg);
}
请参阅:http://jsfiddle.net/CCMyf/79/
这篇关于使用CSS垂直居中旋转文本的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!