CSS偏移中文本长度的垂直文本放置

Question

我正在尝试创建一个挂在页面上的块元素上的信息标记，但在定位时遇到一些问题。要了解我正在尝试做什么，请参阅附图。内容块实际上是页面上的右侧列。

<div class="contentblock">
  <span class="tag">tag</span>
</div>

div.contentblock{
  width: 575px;
  float: left;
  margin-left: 20px;
  margin-top: 20px;
  min-height: 300px;
  display: block;
  position: relative;
  padding: 15px;
  ...
}

span.tag{
  font-size: 14px;
  margin-left: 495px;
  color: rgba(65,65,66,0.6);
  display: inline-block;
  text-align: center;
  text-transform: lowercase;
  position: absolute;
  margin-top: 115px;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 2px;
  padding-bottom: 5px;
  background: #fff;
  margin-bottom: -145px;
  min-width: 60px;
  width: auto !important;
  white-space: nowrap;
  -webkit-transform:rotate(90deg);
  -moz-transform:rotate(90deg);
  -o-transform: rotate(90deg);
  border: 2px solid rgba(65,65,66,0.5);
  border-bottom: 0;
}

这种作品 - 附加图像实际上是结果，但它不能很好地工作，因为标签的水平放置似乎受到标签长度的影响。 <span pushes>中较长的文本向右移动（它也将它垂直向下扩展 - 应该如此）。因此，标签元素上留下的半任意边距 - 恰好适用于一个特定的文本字符串。

我想我会以错误的方式解决这个问题。什么是更有效的方法来实现这一目标？

Answer 1

尝试将其“正确”属性设置为负数，而不是使用边距来定位标记。例如，右：-10px。这样就可以使标签的右边缘在块右边缘的右边10px。

Answer 2

由于您没有指定变换原点，因此它默认为元素的中间位置。因此，更改文本数量将抵消中间位置并导致转换发生变化。

您应该为固定的内容指定transform-origin（和所有供应商扩展程序），例如左上角，然后根据该位置进行定位。

请注意，-ms-transform也非常实用。