侧身头球

Question

我一直试图解决侧面标题问题。我打算在网站上创建一个全局侧面标题：sideways header

然而，我的问题出现了尝试分离类型（它也打破2行）。我似乎无法使垂直线包含在矩形内或居中。当我调整浏览器窗口的大小时，它不会保留在矩形框中。我非常感谢任何建议和建议！

到目前为止我所拥有的：

.box {
  height: 1326px;
  width: 112px;
  background-color: transparent;
  border: 1px solid #f9f0e4;
}

.bottom {
  text-align: center;
  color: #000000;
  /* Safari */
  -webkit-transform: rotate(-90deg);
  /* Firefox */
  -moz-transform: rotate(-90deg);
  /* IE */
  -ms-transform: rotate(-90deg);
  /* Opera */
  -o-transform: rotate(-90deg);
  /* Internet Explorer */
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

.top {
  text-align: center;
  color: #000000;
  /* Safari */
  -webkit-transform: rotate(-90deg);
  /* Firefox */
  -moz-transform: rotate(-90deg);
  /* IE */
  -ms-transform: rotate(-90deg);
  /* Opera */
  -o-transform: rotate(-90deg);
  /* Internet Explorer */
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

.vl {
  border-left: 1px solid #f9f0e4;
  height: 620px;
  position: absolute;
  left: 50%;
  top: 0;
}

<div class="container">
  <div class="box">
    <p class="bottom">CREATIVE STUDIO</p>
    <div class="vl">
      <p class="top">FLORENCE &mdash; ITALY</p>
    </div>
  </div>
</div>

Answer 1

您可以考虑在整个盒子上旋转并使用vh单位，因此宽度相对于高度，因为它旋转：

.box {
  background-color: transparent;
  width: 80vh;
  border: 1px solid;
  transform: rotate(-90deg) translate(-50%, 0);
  transform-origin: center;
}

.box {
  display: flex;
  justify-content: space-between;
  text-align: center;
  color: #000000;
}

.bottom {
  text-align: center;
  color: #000000;
  margin-left: 10px;
}

.top {
  text-align: center;
  color: #000000;
  margin-right: 10px;
}

<div class="box">
  <p class="bottom">CREATIVE STUDIO</p>
  <p class="top">FLORENCE &mdash; ITALY</p>
</div>