使用 ng-repeat 时无法居中对齐文本

Question

我正在构建一个 Ionic 应用程序，但运行遇到了一个我不理解且似乎无法解决的小问题。

我有一个硬编码的 ion-item 和一个使用 ng-repeat 生成的 ion-item。我正在使用 css 将它们中的文本居中，但是，与硬编码的相比，使用 ng-repeat 生成的 ion-item 稍微靠左一些。当我使用离子视图和模板时，这似乎只是一个问题。如果我将代码移动到 index.html 它们都正确居中。

对导致它的原因以及我可以采取什么措施来解决它有什么想法吗？

link 到 plunker: plnkr.co/edit/tUM7pL54OlyCQwr2qu3o?p=preview

Html结构：

<ion-view title="Home">
      <ion-content>
        <div id="menu">          
              <ion-list>
                  <ion-item class="item-trns">
                  test
                  </ion-item>
                  <ion-item class="item-trns">
                  more test
                  </ion-item>
              </ion-list>
        </div>

        <div id="categories">

              <ion-list ng-controller="CatCtrl">
                  <ion-item class="item-trns" ng-repeat="category in categories" ui-sref='{{category.view}}'>
                  {{category.title}}  
                  </ion-item>
              </ion-list>
        </div>
      </ion-content>
</ion-view>

谢谢，卡斯帕

Answer 1

您的问题是 ui-sref 标签，它将 "item-content" class 添加到您的自动生成的离子项目中，此 class 将 padding: 16px 49px 16px 16px; 添加到您的元素中。如果您删除 ui-sref，您生成的离子项目将居中。

Answer 2

ui-sref 指令在每个 <ion-list> 中创建一个 <a> 如果你想对齐两者，你需要调整 CSS 如果新创建的元素没有填充

通过添加此 class，您可以覆盖默认样式并保留 ui-sref

a.item-content {
  padding-left:0px !important;
  padding-right:0px !important;
}

使用 ng-repeat 时无法居中对齐文本

can't center align text when using ng-repeat

angularjs

ng-repeat

ionic