CODEWITHSUNDEEP
htmlcss
dec
dec

Reputation: 604

Vertical center a rotated div inside a div

I don't get it ;-(

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?

Here is the fiddle

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

Painted

Upvotes: 5

Views: 6423

Answers (3)

Stickers
Stickers

Reputation: 78676

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>

Upvotes: 5

Digital Brent
Digital Brent

Reputation: 1285

EDIT: So this won't work if you plan on making more of these with different widths but for right now if I just add margin-left: -72px; to the .inner class it aligns to the left of the inside of the .outer div.

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

Upvotes: 0

isherwood
isherwood

Reputation: 61056

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

Demo

There are probably easier ways to accomplish this. Rotating the parent element would eliminate some complexity, I think.

Upvotes: 5

Related Questions