CODEWITHSUNDEEP
htmlcss
user1133297
user1133297

Reputation:

Div align middle inside in rotated div

I've made the following JSfiddle to see my actual problem. I want a rotated div to be full width.

I already achieved that by giving it 120% width and make overflow:hidden in the container (I wanted the rotated div not to have empty spaces in corners).

Now I want to place something in the middle. I tried with margin:0 auto but because its 120% it goes to the right center. I want to be exactly in the middle of the screen (and on different screens of course)

Here is the code and the jsfiddle:

<div class="container">
    <div class="rotaded">
        <p>
            <img src="http://imgcdn.nrelate.com/image_cache/www.valcun.com/fc95c92475a927c2bc5130b343e2c5f8_thumb_short-url.png">
        </p>
    </div>
</div>

CSS:

.container {
    overflow:hidden;
    width:100%;
}
.rotaded {
    background:red;
    width:120%;
    height:200px;
    -webkit-transform: rotate(-3deg);
    -moz-transform: rotate(-3deg);
    -webkit-transform-origin: bottom left;
    -moz-transform-origin: bottom left;
}
p {
    width:100px;
    height:200px;
    position:relative;
    top:40px;
    margin: 0 auto;
    -webkit-transform: rotate(3deg);
    -moz-transform: rotate(3deg);
    -webkit-transform-origin: bottom left;
    -moz-transform-origin: bottom left;
}

Upvotes: 0

Views: 104

Answers (4)

vals
vals

Reputation: 64264

Your math (and everything else) will be easier if you use the alternate to rotate, skew:

.container {
    overflow:hidden;
    width:100%;
}
.rotaded {
    background:red;
    width:100%;
    height:200px;
    -webkit-transform: skewY(-3deg);
    -moz-transform: skewY(-3deg);
    -webkit-transform-origin: bottom left;
    -moz-transform-origin: bottom left;
}
p {
    width:100px;
    height:200px;
    position:relative;
    top:40px;
    margin: 0 auto;
    -webkit-transform: skewY(3deg);
    -moz-transform: skewY(3deg);
    -webkit-transform-origin: bottom left;
    -moz-transform-origin: bottom left;
}

The Main advantage is that skewY won't change the width of the transformed element (and the vertical sides go on being vertical), that seems to be what you want

fiddle

Upvotes: 2

G-Cyrillus
G-Cyrillus

Reputation: 106068

if you had a transparent border of anysize on the right, it will show your background all the way through, even if it is a background-image: http://jsfiddle.net/qf2tg/5/ 

.container {
            overflow:hidden;
            width:100%;
        }
        .rotaded {
            background: url(http://lorempixel.com/800/800/nature);/* let use an image instead color  
    to see what it does ;) */
            width:100%;
            border-right:100px solid rgba(0, 0, 0, 0);/* here grow your container 
    to have it overflow 
    , beware of the use of box-sizing :) 
    and give enough width to your border, 
    higher is the container, bigger is the gap to fill  */
            height:200px;
            -webkit-transform: rotate(-3deg);
            -moz-transform: rotate(-3deg);
            -webkit-transform-origin: bottom left;
            -moz-transform-origin: bottom left;
        }
        p {
            text-align:center;
            height:200px;
            position:relative;
            top:20px;
            margin: 0 auto;
            -webkit-transform: rotate(3deg);
            -moz-transform: rotate(3deg);
            -webkit-transform-origin: bottom left;
            -moz-transform-origin: top left;
        }

to center your image, do not give a width to <p>, but a text-align:center; should do fine .

higher will be height or rotation will be, bigger will be the gap to fill,you need to increase border's width as much as needed to fill it.

Upvotes: 0

asfandahmed1
asfandahmed1

Reputation: 464

You can do this by adding this line:

/*margin: 0 0 0 30%;*/   

.container {
overflow:hidden;
width:100%;

}
.rotaded {
    background:red;
    width:120%;
    height:200px;
    -webkit-transform: rotate(-3deg);
    -moz-transform: rotate(-3deg);
    -webkit-transform-origin: bottom left;
    -moz-transform-origin: bottom left;
}
p {
    width:100px;
    height:200px;
    position:relative;
    top:40px;
    margin: 0 0 0 30%;
    -webkit-transform: rotate(3deg);
    -moz-transform: rotate(3deg);
    -webkit-transform-origin: bottom left;
    -moz-transform-origin: bottom left;
}

Upvotes: 0

CRABOLO
CRABOLO

Reputation: 8793

Well, if your 120% width... then it seems as though 20% is going to the right off screen..

So instead of that, lets have 10% go off to the right, and 10% off to the left, so its even.

So try 

.rotaded {
    margin-left: -10%;
}

or 

.rotaded {
    left: -10%;
    position: relative; //likely need to add this
}

Upvotes: 0

Related Questions