CSS 变换偏移量随文本长度而变化答案

【问题标题】：CSS Transform offset varies with text lengthCSS 变换偏移量随文本长度而变化
【发布时间】：2013-10-28 12:13:07
【问题描述】：

我设置了一个 demo，它有 5 个浮动的 <div>s，带有不同长度的旋转文本。我想知道是否有一种方法可以让 CSS 类不管长度如何都可以处理所有文本的居中。目前，我必须为样式表中的每个字符长度创建一个类。这可能会变得太混乱。我还注意到，如果我增加或减少包装 <div> 的大小，偏移会搞砸。

我将通过 jQuery 将这些类添加到 div 中，但我仍然必须设置每个类以实现跨浏览器兼容性。

.transform3 {
    -webkit-transform-origin: 65% 100%;
    -moz-transform-origin: 65% 100%;
    -ms-transform-origin: 65% 100%;
    -o-transform-origin: 65% 100%;
    transform-origin: 65% 100%;    
}
.transform4 {
    -webkit-transform-origin: 70% 110%;
    -moz-transform-origin: 70% 110%;
    -ms-transform-origin: 70% 110%;
    -o-transform-origin: 70% 110%;
    transform-origin: 70% 110%;
}
.transform5 {
    -webkit-transform-origin: 80% 120%;
    -moz-transform-origin: 80% 120%;
    -ms-transform-origin: 80% 120%;
    -o-transform-origin: 80% 120%;
    transform-origin: 80% 120%;
}
.transform6 {
    -webkit-transform-origin: 85% 136%;
    -moz-transform-origin: 85% 136%;
    -ms-transform-origin: 85% 136%;
    -o-transform-origin: 85% 136%;
    transform-origin: 85% 136%;
}
.transform7 {
    -webkit-transform-origin: 90% 150%;
    -moz-transform-origin: 90% 150%;
    -ms-transform-origin: 90% 150%;
    -o-transform-origin: 90% 150%;
    transform-origin: 90% 150%;
}

注意：我设置的偏移值是目测的。

更新

虽然我希望使用样式表来处理这个问题，但我相信我必须计算 JavaScript 中 CSS 的转换。

我创建了以下demo 来演示动态转换。在这个demo中，用户可以调整.v_text类的font-size，只要文字的长度不超过.v_text_wrapper的高度，文字应该垂直居中对齐，但要注意我必须调整magicOffset 的值。

~~好吧，我刚刚注意到这在 iOS 中不起作用...~~谢谢@Dinesh Kumar DJ

【问题讨论】：

jsfiddle.net/geA27/11 更新了 jsfiddle
我会将您的更新设置为基线。为什么在将元素添加到文档之前计算偏移量很重要？
元素位置、宽度等在添加到dom之前不会计算
我认为这是你需要的，jsfiddle.net/geA27/15，你可以根据需要优化代码，谢谢
不使用text-align:center 来处理居中问题我觉得很愚蠢...

标签： javascript jquery html css transform

【解决方案1】：

给你：http://codepen.io/teodragovic/pen/fgekh

#output1,
#output2{
  margin: 50px;
  display: inline-block;
}

.rotate {
  //remove this line if using js
  transform: translateY(150px) rotate(-90deg);
}

.v_text_wrapper {
  float: left;
  width: 100px;
  height: 150px;
  background: #AAA;
  border: solid #222 1px;
  padding: 0;
  margin: 0;
  position: relative;
}

#output2 .v_text_wrapper {
  height: 170px;
}

.v_text {
  color: #444;
  font-family: monospace;
  font-weight: bold;
  font-size: 1em;

  width: 150px; //remove this line if using js
  height: 100px;
  transform-origin: top left;
  text-align: center;
  position: absolute;
  display: table;
}

p {
  display: table-cell;
  vertical-align: middle;
}

不需要 JS 和动态偏移。您可以将所有包含文本的 <div> 设置为与包装器相同的宽度和高度，围绕左上角（可以是任何角）旋转它们，然后使用 translateY 将它们定位回包装器内（假设包装器尺寸始终是相同且已知的值）。

我在文本周围添加了额外的<p> 元素并使用以下方法进行垂直居中： http://css-tricks.com/vertically-center-multi-lined-text/

编辑：我更新了笔以防包装器<div> 改变大小。由于<div> 被旋转，它们的宽度变为高度，反之亦然，因此如果包装器的尺寸为 100x150，则子项必须为 150x100。

$('.v_text_wrapper').each(function(){
  var x = $(this).css("height");
  var text = $(this).children('.v_text');
  text.css({"transform":"translateY("+x+") rotate(-90deg)", "width":x});
});

【讨论】：