对齐跨度元素居中后 translateX答案

【问题标题】：Align span elements centered post translateX对齐跨度元素居中后 translateX
【发布时间】：2017-03-09 17:39:06
【问题描述】：

我正在尝试将一组 span 元素（使用 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/

更新：

我试图切换到使用宽度设置为起点到 next 元素起点的宽度的“框”，本质上是一个带有列的表格，但现在的问题是lat 元素没有居中，因为宽度被分解以适合父元素。

也就是说，还是没有运气！

【问题讨论】：

标签： javascript html css angularjs

【解决方案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)
      }
    })
  }
});

见小提琴：http://jsfiddle.net/w3fs8efe/91/

【讨论】：