Question

所以我有这些＆＃34;瓷砖＆＃34;使用ng-repeat创建，如下面的代码所示。这部分工作正常，这个问题更加适合我为什么无法让<ul>以平板电脑和移动设备的较小视图为中心，就像我可以完整查看一样。我也使用Bootstrap 3.x.已经尝试过骑行，但似乎没有任何东西似乎是这些瓷砖的中心。还将显示下面不同移动视图的图像，然后还显示完整视图，然后是我的代码。

在平板电脑上，它应显示2居中。它确实显示2，但它们被证明是正确的：

然后在移动设备上，应该是1居中，但再次，左对齐为：

现在，在完整视图中，您可以看到它们在父容器中的居中位置：

我的代码（HTML）：

<div class="beneArea">
    <div class="beneHeading" style="padding-top: 30px;">
        <h1>My Benefit Statements</h1>
        <p>Click on a benefit tile to access more detailed information.</p>
    </div>
    <div class="beneArea col-md-12">
        <ul class="col-md-3" data-ng-repeat="benefit in ppt.Benefits" >
            <div class="beneTile" ng-if="benefit.planTypeId==1 && benefit.isPending==false && benefit.isOE==false && (benefit.benefit == 'HealthCare' || benefit.benefit == 'Health Care' || benefit.benefit == 'Limited')" >
                <a style="text-decoration: none" href="#/statement?pid={{benefit.planId}}&bid={{benefit.benefitTypeId}}">
                  <card template1 ng-model="benefit"></card>
                </a>
            </div>
            <div class="beneTile" ng-if="benefit.planTypeId==1 && benefit.isPending==true && benefit.isOE==true && (benefit.benefit == 'HealthCare' || benefit.benefit == 'Health Care' || benefit.benefit == 'Limited')" >
                <card template1b ng-model="benefit"></card>
            </div>
            <div class="beneTile" ng-if="benefit.planTypeId==1 && benefit.isPending==true && benefit.isOE==false && (benefit.benefit == 'HealthCare' || benefit.benefit == 'Health Care' || benefit.benefit == 'Limited')" >
                <card template1c ng-model="benefit"></card>
            </div>
            <div class="beneTile" ng-if="benefit.planTypeId==1 && benefit.isPending==false && benefit.isOE==false && benefit.benefit == 'DayCare'" >
              <a style="text-decoration: none" href="#/statement?pid={{benefit.planId}}&bid={{benefit.benefitTypeId}}">
                <card template1d ng-model="benefit"></card>
              </a>
            </div>
            <div class="beneTile" ng-if="benefit.planTypeId==1 && benefit.isPending==true && benefit.isOE==false && benefit.benefit == 'DayCare'" >
              <card template1c ng-model="benefit"></card>
            </div>
        </ul>
    </div>
</div>

一些创建和管理这些内容的CSS：

.beneArea {
    clear: both;
    padding-left: 0;
    padding-right: 0;
}

.beneHeading {
    color: #000000;
    text-align: center;
}

.beneHeading h1 {
    color: #000000;
}

.beneHeading > p {
    padding-bottom: 30px;
}

.beneArea {
    padding-bottom: 60px;
}

.beneArea > ul {
    margin-top: 15px;
    height: 285px;
    width: 285px;
    float: left;
}

.beneTile {
    max-height: 285px;
    max-width: 285;
    border: 1px solid #999999;
}

@media only screen and (max-width: 767px) {
    ul > .beneTile {
        max-height: 285px;
        max-width: 285px;
    }
}

@media only screen and (max-width: 500px) {
    div.beneArea > ul {
        max-height: 285px;
        max-width: 100%;
    }
}

.beneTile:hover {
    cursor: pointer;
}

关于我可以采取哪些措施来解决这个问题？尝试过将margin-left和margin-right auto以及text-align：center应用于<ul>而没有运气以及其他一些事情。任何输入都会很棒！非常感谢。

Answer 1

Dan在这里提出了一个很好的观点，关于你如何编写这些代码的方式看看我放在一起的 FIDDLE here ，以帮助展示您可以在移动视图中将此作为中心。

这个演示使用ng-repeat是一个小角度。

您将看到我使用媒体断点并让css控制 centerThis 类。

我使用以下CSS执行此操作使用：转换：翻译（-50％）;

@media(max-width:768px) {
   .centerThis{
       left: 50%;
       transform: translate(-50%);
    }
}

带有ng-repeat的HTML就像这样...

<div class="container"  ng-app='myApp' ng-controller='DemoController'>
     <div class="row-fluid">
          <div class="col-sm-12 col-xs-6 border-xs centerThis">
               <div class="col-sm-4 col-xs-8 block-1 centerThis" ng-repeat='block in blocks'></div>
          </div>
      </div>
</div>

您会看到我没有像您在代码中那样使用 ul 。

我希望这个小小的演示能帮助你重回正轨。

Angularjs在响应式视图中自定义ng-repeat切片

1 个答案: