我已經為這個小問題撓頭好幾個小時了，我想將旋轉的文本水平居中在 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 rel="stylesheet" />
<link 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 關注
- 163 瀏覽
添加回答
舉報
0/150
提交
取消