居中旋转的div内的文本div

我想旋转div，我希望它覆盖所有身体的宽度。所以我尝试将宽度设置为120％（显然100％是不够的）。然而，这个“解决方案”的问题在于我无法正确地将div对中。我应该如何解决这个问题？居中旋转的div内的文本div

这里是我试图使用代码：

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
body { 
 
    background-color: yellow; 
 
    overflow-x: hidden; 
 
} 
 
.rotation { 
 
    position: relative; 
 
    display: table; 
 
    width: 120%; 
 
    height: 500px; 
 
    transform: rotate(-5deg); 
 
    background-color: green; 
 
    margin-left: -50px; 
 
} 
 
.wrapper { 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
    margin: 0 auto; 
 
    text-align: center; 
 
    transform: rotate(5deg); 
 
}

<h1>Some title</h1> 
 

 
<div class="rotation"> 
 
    <div class="wrapper"> 
 
    <h1>Heading</h1> 
 

 
    <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo quaerat, dolore quod cum ea rerum asperiores cupiditate esse harum. Voluptatibus soluta fuga, beatae quod dolorem, veniam sint ab non laboriosam.</span> 
 
    </div> 
 
</div>

JSFIDDLE

来源

2016-08-22 TheGuy

您是否有参考图像，您想如何看？例如，“中心正确”是什么意思？ – Hans

我能问你为什么旋转整个元素，然后再旋转里面的文本元素？

相反，我会建议使用伪（::before或::after）元素，它可以让您更好地控制背景，并且意味着您不会旋转文本两次。

这里有一个例子为的jsfiddle你：https://jsfiddle.net/8nkz1278/1/

来源

2016-08-22 22:52:03

我甚至没有想过这个。非常感谢你！ – TheGuy

纠正@Andi北的建议。如果你想让包装器总是获得视口的高度，那么你有2个解决方案或者js或css3。我建议css3。

使用vw/vh，我们可以将元素的大小设置为相对于视口的大小。 vw/vh单位很有趣，因为1个单位反映了视口宽度的1/100。例如，要将元素设置为视口的整个宽度，请将其设置为width：100vw。

在你的情况下，只需添加包装元素'height：95vh;'

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
body { 
 
    background-color: yellow; 
 
    overflow-x: hidden; 
 
} 
 

 
.rotation { 
 
    position: relative; 
 
    display: table; 
 
    height: 500px; 
 
} 
 

 
.rotation::after { 
 
    top: 0; 
 
    left: -10%; 
 
    content: ''; 
 
    position: absolute; /* Bring below content */ 
 
    background: lightblue; 
 
    z-index: 1; /* Bring below content */ 
 
    transform: rotate(-5deg); 
 
    width: 120%; 
 
    height: 100%; 
 
} 
 

 
.wrapper { 
 
    position: relative;/* Bring above background shape */ 
 
    z-index: 2; /* Bring above background shape */ 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
    margin: 0 auto; 
 
    text-align: center; 
 
    height:95vh; 
 
}

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
\t <meta charset="UTF-8"> 
 
\t <title>Document</title> 
 
</head> 
 
<body> 
 
\t <h1>Some title</h1> 
 
\t 
 
\t <div class="rotation"> 
 
\t \t <div class="wrapper"> 
 
\t \t \t <h1>Heading</h1> 
 

 
\t \t \t <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo quaerat, dolore quod cum ea rerum asperiores cupiditate esse harum. Voluptatibus soluta fuga, beatae quod dolorem, veniam sint ab non laboriosam.</span> 
 
\t \t </div> 
 
\t </div> 
 
</body> 
 
</html>

干杯！

来源

2016-08-22 23:05:20

居中旋转的div内的文本div

回答

相关问题