對齊span元素居中後translateX

我試圖將一組span元素（用ng-repeat創建）推送到x軸上的某個計算位置。對齊span元素居中後translateX

這是在指令中完成的，其中每個元素的位置是根據一些啓發式計算得出的。

但是，這些元素是不居中，而是左對齊。當存在需要在上述位置下居中的文本（可變長度）時，這會造成問題。

直觀上，可以計算包含文本的元素的寬度，並從translateX位置偏移該值，但html會在指令中編譯，並且更改post render會導致明顯的閃爍。

在下面的代碼中，您可以想像垂直|代表文本應該居中的中點位置。

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元素不會居中，因爲寬度被分解以適合父元素。

換句話說，仍然沒有運氣！

來源

2017-03-09 Bloo It

通過將文本內容放在寬度等於開始位置和結束位置之間的偏移量的範圍內，從而獲得我想要的內容。

的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/

來源

2017-03-10 12:49:58

對齊span元素居中後translateX

回答

相關問題