javascript - 在 translateX 后将跨度元素居中对齐

Question

我正在尝试将一组跨度元素(使用 ng-repeat 创建)推送到 x 轴上的某个计算位置。

这是在指令中完成的，其中每个元素的位置是根据一些启发式计算的。

但是，这些元素并未居中，而是左对齐。当存在需要在上述位置居中的文本(可变长度)时，这会带来问题。

直观上，我们可以计算包含文本的元素的宽度，并从 translateX 位置偏移该宽度，但是 html 是在指令中编译的，并且渲染后的更改会导致明显的闪烁。

在下面的代码中，您可以想象垂直 |表示文本应居中的中点位置。

HTML:

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js"></script>

<div ng-app="varApp" ng-controller="TodoCtrl"> 
  <div class="outter">
    <span class="inner" ng-repeat="i in items track by $index" ng-if="i.value != null" ng-style="i.style">
      {{i.value}}
    </span>
  </div>
  <div class="outter2">
    <span class="inner" ng-repeat="i in items track by $index" ng-style="i.style">|</span>
  </div>
</div>

CSS:

.outter {
  position: absolute;
  top: 40px;
  z-index: 1;
  width: 100%;
  margin-left: 16px !important;
}

.outter2 {
  position: absolute;
  top: 10px;
  z-index: 1;
  width: 100%;
  margin-left: 16px !important;
}

.inner {
  posiiton: absolute;
  cursor: default;
  z-index: 1
  color: #red;
}

JavaScript(片段):

angular.module('varApp', [])
.controller('TodoCtrl', function($scope) {
    var items = $scope.items = [];

  for(var i = 2; i <= 10; i++) {
    var string = new Array(i).join('a');
    items.push({
        value: string,
      style: {
        // should be transform: translateX(calcValue(el))
        marginLeft: (i * 10) + "px"
      }
    })
  }
});

我已经尽可能地重现了该示例，您可以在这里找到它； http://jsfiddle.net/w3fs8efe/90/

更新:

我尝试切换到使用宽度设置为下一个元素起点的“盒子”，本质上是一个包含列的表格，但现在的问题是当宽度被分解以适应父元素时，lat 元素不会居中。

换句话说，还是没有运气!

Answer 1

通过将文本内容放入宽度等于开始位置和结束位置之间的偏移量的范围内，设法获得我想要的内容。

Javascript:

angular.module('varApp', [])
.controller('TodoCtrl', function($scope) {
    var items = $scope.items = [];

  for(var i = 2; i <= 10; i++) {
    var string = new Array(i).join('a');
    items.push({
        value: string,
      style: {
        // should be transform: translateX(calcValue(el))
        marginLeft: (i * 100) + "px",
        minWidth: ((i+1) * 100) - (i * 100)
      }
    })
  }
});

参见 fiddle :http://jsfiddle.net/w3fs8efe/91/