侧身头球

Question

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

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

到目前为止我所拥有的：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

您可以考虑在整个方框上轮换并使用public static void RegisterRoutes(RouteCollection routes) { var settings = new FriendlyUrlSettings(); // settings.AutoRedirectMode = RedirectMode.Permanent; routes.EnableFriendlyUrls(settings); } 单位，因此宽度相对于高度，因为它会被旋转：

＆＃13;

＆＃13;

vh

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;