我已经为这个小问题挠头好几个小时了，我想将旋转的文本水平居中在 div 中，并使其垂直对齐到底部，并且所有这些都需要响应。我设法通过设置一些固定值来实现这一点，但正如预期的那样，当我调整屏幕大小时它会中断。标题分为三部分，第三部分是包含旋转文本的部分，它应该始终水平居中并与图片底部垂直对齐。
1 回答
繁星淼淼
TA贡献1775条经验 获得超11个赞
最终代码片段：
header {
position: relative;
height: 100vh;
}
.left-side {
position: relative;
width: 6.04%;
height: 76.339vh;
margin-top: 10.714vh;
}
.content {
position: relative;
display: inline-block;
width: 87.92%;
height: calc(100% - 10.714vh);
margin-top: 10.714vh;
}
.hero {
position: relative;
}
img {
object-fit: cover;
width: 100%;
height: 76.339vh;
}
.right-side {
width: 6.04%;
position: relative;
height: 76.339vh;
margin-top: 10.714vh;
}
.rotated {
position: absolute;
transform: rotate(-180deg);
bottom: 0;
}
p {
writing-mode: vertical-lr;
white-space: nowrap;
font-size: 1em;
line-height: 1em;
letter-spacing: 1px;
width: 100%;
}
<link href="https://unpkg.com/purecss@1.0.1/build/grids-responsive-min.css" rel="stylesheet" />
<link href="https://unpkg.com/purecss@1.0.1/build/pure-min.css" rel="stylesheet" />
<header class="pure-g">
<div class="left-side">
</div>
<div class="content">
<div class="hero">
<img src="https://i.picsum.photos/id/830/1680/855.jpg">
</div>
</div>
<div class="right-side">
<div class="rotated">
<p>Lorem Ipsum</p>
</div>
</div>
</header>
蓝山帝景
TA贡献1843条经验 获得超7个赞
header {
position: relative;
height: 100vh;
}
.left-side {
position: relative;
margin-left: 5%;
height: 76.339vh;
margin-top: 10.714vh;
}
.content {
position: relative;
display: inline-block;
width: 87.92%;
height: calc(100% - 10.714vh);
margin-top: 10.714vh;
}
.hero {
width: 100%;
position: relative;
img {
object-fit: cover;
width: 100%;
height: 76.339vh;
}
}
.right-side {
margin-right: 5%;
}
.rotated {
position: absolute;
bottom: 10%;
left: 50%;
transform: translate(-50%, -50%);
p {
writing-mode: vertical-lr;
white-space: nowrap;
font-size: 1em;
line-height: 2em;
letter-spacing: 1px;
width: 100%;
}
}
归根结底，我不建议在需要响应式页面时使用“绝对”来定位元素。
- 1 回答
- 0 关注
- 53 浏览
添加回答
举报
0/150
提交
取消