応答ビューのAngularjsカスタムng-repeatタイル

Question

したがって、以下のコードに示すようにng-repeatを使用して作成されたこれらのタイルがあります。その部分は正常に機能し、この質問は実際には私が全画面表示のためにタブレットとモバイル用の小さなビューを中央に置くことができない理由をより重視しています。ブートストラップ3.xも使用しています。乗り物を試しましたが、これらのタイルを中心に置くことはありません。また、携帯電話のさまざまなビューの下に画像を表示し、次にフルビュー、次にコードを表示します。

タブレットでは、中央に2つ表示されます。それは2を示していますが、それらは以下のように左詰めされています。モバイルに続いて

、1を中心にしなければならないが、やはり、と左寄せ：

そして今、上

：完全なビュー、あなたは彼らが親コンテナ内の中心に位置しているかを確認することができます0

私のコード（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; 
} 

任意のアイデア？マージン左とマージン右のオートとテキストの整列を適用しようとしました：中心は<ul>に運がなく、他の多くのものがあります。すべての入力は素晴らしいでしょう！どうもありがとう。

Answer 1

Danは、このコードを敷設した方法についてここで良い点を挙げています。
モバイルビューでこれを中心にするためにここでできることを示すために一緒にまとめました。FIDDLE here

このデモではng-repeatを使用して少し角度があります。

私はメディアブレークポイントを使用して、CSSのコントロールにcenterThisクラスがあることがわかります。

私はこれを次のCSSで行います。
使用：トランスフォーム：translate（-50％）;

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

ngのリピートと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を使用していませんでしたが表示されます。

私はこの小さなデモがあなたに役立つことを願っています。