Question

有没有办法在不诉诸JavaScript的情况下实现这一目标？问题似乎是我需要根据容器指定transform: translateX(...)（因为我想将其降低50％），但应用“transform: translateX(50%);”会将其降低50％ label的身高。

编辑：添加代码段。这几乎是我想要实现的目标，除了我找不到相对于容器将文本向下移动50％的方法。

.vertical {
  transform: rotate(270deg) translateX(-250px);
  transform-origin: left top 0;
  float: left;  
}

<div style="position:absolute;height:100%;width:100%;background-color:gray">
  <label class="vertical"> Vertical text in the middle of the left edge
  </label>
<div>

Answer 1

变换容器比容纳里面的元素容易得多。

JSfiddle Demo

下面的示例将旋转div放在页面的中间位置...并将其保持在滚动状态，我认为这就是您想要的。如果您希望div与页面一起滚动，请改为使用position:absolute。

* {
  margin: 0;
  padding: 0;
}
div {
  background: lightblue;
  border: 1px solid grey;
  display: inline-block;
  padding: .25rem;
  position: fixed;
  top: 50%;
  /* halfway down the page */
  transform-origin: top left;
  /* set the rotation point */
  transform: rotate(-90deg) translate(-50%, 0%);
  /*rotate 90degs counter-clockwise AND move the element UP half it's width which is now it's height */
}

<div>
  <p>Vertical text in the middle of the left edge</p>
</div>

HTML / CSS：垂直标签，位于容器左边缘的中间

1 个答案: