Foundations 'Flex Grid'を使用してネストされたアイテムを中央に整列

Question

Foundation 6のフレックスグリッドでは、Foundationの 'align-center'クラスと中央で整列された親eleの子を一列に整列しようとしています。

親.rowは、フレックスボックスを使用してその子のコンテンツを整列（正当化）します。フレームワークを使用して4行目のeleに中心合わせを適用するにはどうすればよいですか？

注ライン4に

1. 'ALIGN自己中心' は効果がありません。
2. サンプル/可読性のみに使用されるインラインスタイリング。

3. 4行目に「margin：auto」を指定すると問題は解決されますが、imgを使用している場合は問題は解決しません。 IMGを使用する場合には

   <section class="row expanded align-middle align-center" style="height: 100%;"> 
   <div class="columns small-7 medium-4"> 
       <h3 class="text-center">lakakakaka</h3> 
       <div class="align-self-center" style="height: 20px; width: 20px; background: pink;"></div> 
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
   </div> 
   

、コラム、設定マージンとしてラッパーを適用する：オートも所望の効果を達成する、しかし確実にこれを行うには良い方法をtheresの？

<section class="row expanded align-middle align-center" style="height: 100%;"> 
    <div class="columns small-7 medium-4"> 
     <h3 class="text-center">lakakakaka</h3> 
     <div class="row columns small-6" style="margin:auto"> 
      <img src="..." alt="..." style="width: 100%;" /> 
     </div> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
    </div> 
</section> 

Answer 1

既定では、.rowはフレックスの親です。列はフレックスの子です。それは子どもたちが整列することができますように.columnフレックス親にするために、あなたは

.align-middle { 
    display: flex; 
    align-items: center; 
    justify-content: center; 
} 

のようないくつかのCSSを必要とする我々はhttps://zurb.createsend.com/campaigns/reports/viewCampaign.aspx?d=y&c=E5D5A5C6700B86DC&ID=3053EAAD5186C206&temp=False&tx=0

を助けることが最近、この上のレッスンを書きました