问题描述:

I am going crazy, I'm trying to center some divs (relatively to the viewport).

The problem is that those divs that I want to center are nested in some rotated div (4deg).

.inner-wrap{

width: 200vw;

position: relative;

padding: 20vh 0;

right: -50vw;

left: -50vw;

bottom: -50px;

transform-origin: bottom left;

transform: rotate(-4deg);// HERE THE ROTATION

margin: auto;

}

I corrected the angle for the text in the article nested in the .inner-wraps

article{

transform: rotate(4deg);

max-width: 960px;

margin: auto;

}

THE PROBLEM:

The two rotations let the content slide a bit on the left resulting a bit annoying see the link :)

https://drive.google.com/file/d/0Bw4B9Lk7vRtda3p4TWpWNzhBZVU/view?usp=sharing

How can I fix this?

网友答案:

You can try giving a width to the titles, then position it relative to your window with 50% and margin-left: -(half of the width of the element) In this case I used -140px

section.who article.logo {
    max-width: 280px;
    position: relative;
    left: 50%;
    margin-left: -140px;
}
网友答案:

Ok, I'm an idiot! I setted the rotation origin as bottom left instead of center ....

相关阅读:
Top