将div内的旋转div垂直居中 [英] Vertical center a rotated div inside a div
本文介绍了将div内的旋转div垂直居中的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我不明白;-(
我想将div居中放置在另一个div中.内部div旋转90度.到目前为止,一切都很好.我的问题是我无法使内部div与外部div的左侧水平对齐. 该怎么办?
I want to center a div with a text contained in another div. The inner div is rotated by 90 degres. So far so good. My problem is that I can't get the inner div to align horizontal to the left of the outer div. How can this be done?
HTML:
<div class="outer">
<div class="inner">
12345678901234567890
</div>
</div>
CSS:
div {
border: 1px solid red;
}
.outer {
position: absolute;
top: 0px;
height: 300px;
width: 30px;
}
.inner {
transform: translateX(-50%) translateY(-50%) rotate(90deg);
margin-left: 10px;
position: relative;
top: 50%;
text-align: center;
}
推荐答案
也将内部div设置为position:absolute
.
Set the inner div to position:absolute
too.
http://jsfiddle.net/r4vrf7pg/8/
div {
border: 1px solid red;
}
.outer {
position: absolute;
top: 0px;
height: 300px;
width: 30px;
}
.inner {
transform: translateX(-50%) translateY(-50%) rotate(90deg);
margin-left: 10px;
position: absolute;
top: 50%;
text-align: center;
}
<div class="outer">
<div class="inner">
12345678901234567890
</div>
</div>
这篇关于将div内的旋转div垂直居中的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文