スパン要素を中心に配置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/

UPDATE：私は次要素に起点のものに設定幅と「ボックス」を使用するように切り替えることを試みた

は、本質的に、列を持つテーブルを始点しかし、今問題は、幅が親要素に収まるように分割されるので、lat要素が中央に来ないということです。

言い換えれば、まだ運がない！

Answer 1

テキストコンテンツを開始位置と終了位置の間のオフセットに等しい幅のスパンの内側に配置することで、私が望むものを得ることができます。

Javascriptを：http://jsfiddle.net/w3fs8efe/91/

：

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) 
     } 
    }) 
    } 
}); 

がフィドルを参照してください。