我正在尝试旋转一个 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>
最佳答案
请问为什么要旋转整个元素然后再旋转里面的文本元素?
相反,我建议使用伪 (::before
或 ::after
) 元素,它可以让您更好地控制背景并且意味着您不会旋转发短信两次。
这里有一个 JSFiddle 示例:https://jsfiddle.net/8nkz1278/1/
关于html - 在旋转的 div 中居中带有文本的 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39089626/