将div内的旋转div垂直居中 [英] Vertical center a rotated div inside a 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屋！