在一个div内垂直居中旋转的div

Question

我不明白 ;-(

我想将一个包含文本的div居中，这个div内部被旋转了90度。目前看起来很好。我的问题是我无法将内部div水平对齐到外部div的左侧。如何解决这个问题？

这里是示例

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;
}

- dec

---

你可以使用 transform-origin 来选择旋转的位置并更新其他值：http://jsfiddle.net/r4vrf7pg/4/ - G-Cyrillus

哦，抱歉，这只是故事的前半部分。我忘了提到，外部div应该只有大约30像素。(我添加了isherwood的样式) - dec

内部 div 的边框应包含整个文本。 - dec

Answer 1

.inner {
    ...
    transform: translateX(-50%) translateY(-50%) rotate(90deg);
    margin-left: 10px;
}

演示

可能有更简单的方法来完成这个任务。我认为旋转父元素可以减少一些复杂度。

- isherwood

Answer 2

将内部div也设置为position:absolute。

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>

- Stickers

Answer 3

编辑：如果你计划使用不同宽度制作更多这样的元素，那么这个方法就不适用。但是目前，如果我在 .inner 类中添加 margin-left: -72px;，它会与 .outer div 内部的左侧对齐。

.inner {
    transform: translateY(-50%) rotate(90deg);
    position: relative;
    top: 50%;
    margin-left: -72px;
    text-align: center;
    width: auto;
}

- Digital Brent

---

可能需要为 .outer 添加一些宽度，因为我不认为它的宽度与最初相同。 - Digital Brent