水平和垂直对齐旋转文本

Question

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

Answer 1

最终代码片段：

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>

Answer 2

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

   }

}

归根结底，我不建议在需要响应式页面时使用“绝对”来定位元素。