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

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/[email protected]/build/grids-responsive-min.css" rel="stylesheet" />
<link href="https://unpkg.com/[email protected]/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>

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

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

一天结束时，我不建议在需要响应页面时使用'absolute'来放置元素。

使用FlexBox代替，很容易使用此link轻松了解它。

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/[email protected]/build/grids-responsive-min.css" rel="stylesheet" />
<link href="https://unpkg.com/[email protected]/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>