在旋转的div中居中带有文本的div。
在旋转的div中居中带有文本的div。
提问于 2016-08-22 22:24:46
我试着旋转一个div，我希望它能覆盖身体的所有宽度。因此，我尝试将宽度设置为120% (显然100%不够)。然而，这个“解决方案”的问题是，我无法正确地将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>
Stack Overflow用户
发布于 2016-08-22 23:05:20
更正“Andi North”的建议。如果您想要这样，包装器总是获得视图端口的高度，您有2个解决方案或js或css3。我建议css3。
对于vw/vh，我们可以将元素的大小与视口的大小相对应。vw/vh单元很有趣，因为该1单元反映了视口宽度的1/100。例如，要使一个元素成为视图端口的全部宽度，您可以将其设置为宽度:100 it。
在您的情况下，只需添加包装元素'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>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<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>
</body>
</html>
干杯！
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/39089626
复制相关文章
相似问题
腾讯云开发者
