水平和垂直对齐旋转的文本

Question

我已经为这个小问题挠了好几个小时，我想在一个 div 中水平居中旋转文本，并让它垂直对齐到底部，并且所有这些都需要响应。 我设法通过设置一些固定值来实现这一点，但正如预期的那样，当我调整屏幕大小时它会中断。

这是我的 CSS 和 HTML：

 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: calc(6.04% - 2px); position: relative; border: 1px solid red; }.rotated { position: absolute; transform: rotate(-90deg) translateY(-150%); top: calc(76.339vh - 10.714vh); } p { white-space: nowrap; font-size: 1em; line-height: 2em; 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>

header 分为三部分，第三部分是包含旋转文本的部分，它应该始终水平居中，垂直与图片底部对齐。

Answer 1

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%;
   }
}

在一天结束时，我不建议在需要响应页面时对 position 元素使用“绝对”。

使用 FlexBox 代替它很容易使用此链接轻松了解它。

Answer 2

感谢Paulie_D线索，我设法通过使用writing-mode: vertical-lr;解决了我的问题。 并且仅将文本旋转-180°。

最终代码片段：

 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>