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

【问题标题】：can't center align text when using ng-repeat使用 ng-repeat 时无法居中对齐文本
【发布时间】：2015-05-21 03:00:44
【问题描述】：

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

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

对导致它的原因以及我能做些什么来解决它有什么想法吗？

链接到 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>

谢谢，卡斯帕

【问题讨论】：

链接到 plunker：plnkr.co/edit/tUM7pL54OlyCQwr2qu3o?p=preview
把链接放到帖子里。最好的地方是在第一句话之后。它使您的问题对其他人来说更清楚。除此之外，我无法帮助您解决问题。
下次我会记住这一点的:)

标签： angularjs ionic ng-repeat

【解决方案1】：

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

【讨论】：

是的，在@kandersen 作品提供的 plunker 链接中删除它。
谢谢你，科斯塔。不知道这一点，所以这很有帮助！

【解决方案2】：

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

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

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

【讨论】：