フレックスボックスの列の中にテキストを水平に配置

Question

私はflexboxを使って簡単なフッターを作成しようとしています。しかし、私はtext-align: centerではなくフレックスボックスの列の中にテキストのブロックを配置したいが、実際にはその列内にテキストのブロックを配置したい。ここで

はjsfiddleです： https://jsfiddle.net/f2yb72c9/

HTML

<div class="row-flex--footer"> 
      <div class="column"> 
      <nav> 
       <h4 class="hl--list footer__hl">Company</h4> 
       <ul> 
       <li> <a class="footer__link">About us</a></li> 
       <li><a class="footer__link">Careers</a></li> 
       <li> <a class="footer__link">News</a></li> 
       </ul> 
      </nav> 
      </div> 
      <div class="column"> 
      <nav> 
       <h4 class="hl--list footer__hl">Surgeons</h4> 
       <ul> 
       <li> <a class="footer__link">3D Business Manager</a></li> 
       <li><a class="footer__link">Plans &amp; Pricing</a></li> 
       </ul> 
      </nav> 
      </div> 
      <div class="column">   
      <nav> 
       <h4 class="hl--list footer__hl">Patients </h4> 
       <ul> 
       <li> <a class="footer__link">Find a Crisalix surgeon</a></li> 
       <li><a class="footer__link">Community</a></li> 
       </ul> 
      </nav> 
      </div> 
     </div> 
     </footer> 

CSS

ul{ 
    list-style:none; 
    padding:0; 
} 
.row-flex--footer { 
    align-content: center; 
    display: flex; 
    flex-wrap: wrap; 
    justify-content: space-around; 
} 

footer .column { 
    flex: 1 1 auto; 
} 
@media (min-width: 868px) { 
    footer .column { 
    flex: 1 1 33.333%; 
    } 
} 

Answer 1

以下JSFiddleを見てください。私はあなたがスタイルシートではなく、 "cols"を％を使用することをお勧めします。 あなたが探していることは次のとおりです。

display: flex; 
align-items: center; 
justify-content: center; 

これは、テキスト整列を使用せずに、フレックスボックスの列に一元化コンテンツに使用されます。

ul{ 
 
     list-style:none; 
 
     padding:0; 
 
    } 
 
    .row-flex--footer { 
 
     align-content: center; 
 
     display: flex; 
 
     flex-wrap: wrap; 
 
     justify-content: space-around; 
 
    } 
 

 
    footer .column { 
 
     flex: 1 1 auto; 
 
     background: coral; 
 
     margin: 5px; 
 
     display: flex; 
 
     align-items: center; 
 
     justify-content: center; 
 
    } 
 
    @media (min-width: 868px) { 
 
     footer .column { 
 
     flex: 1 1 33.333%; 
 
     } 
 
    }

<footer> 
 
     
 
    <div class="row-flex--footer"> 
 
       <div class="column"> 
 
       <nav> 
 
        <h4 class="hl--list footer__hl">Company</h4> 
 
        <ul> 
 
        <li> <a class="footer__link">About us</a></li> 
 
        <li><a class="footer__link">Careers</a></li> 
 
        <li> <a class="footer__link">News</a></li> 
 
        </ul> 
 
       </nav> 
 
       </div> 
 
       <div class="column"> 
 
       <nav> 
 
        <h4 class="hl--list footer__hl">Surgeons</h4> 
 
        <ul> 
 
        <li> <a class="footer__link">3D Business Manager</a></li> 
 
        <li><a class="footer__link">Plans &amp; Pricing</a></li> 
 
        </ul> 
 
       </nav> 
 
       </div> 
 
       <div class="column">   
 
       <nav> 
 
        <h4 class="hl--list footer__hl">Patients </h4> 
 
        <ul> 
 
        <li> <a class="footer__link">Find a Crisalix surgeon</a></li> 
 
        <li><a class="footer__link">Community</a></li> 
 
        </ul> 
 
       </nav> 
 
       </div> 
 
       <div class="column">    
 
       <nav> 
 
        <h4 class="hl--list footer__hl">Support </h4> 
 
        <ul> 
 
        <li> <a class="footer__link">Surgeon Help Center</a></li> 
 
        <li><a class="footer__link">Patient Help Center</a></li> 
 
        <li><a class="footer__link">Surgeon Help Center</a></li> 
 
        </ul> 
 
       </nav> 
 
       </div> 
 
       <div class="column">   
 
       <nav> 
 
        <h4 class="hl--list footer__hl">Legal</h4> 
 
        <ul> 
 
        <li> <a class="footer__link">Universal terms</a></li> 
 
        <li><a class="footer__link">Privacy policy</a></li> 
 
        <li><a class="footer__link">Security statements</a></li> 
 
        </ul> 
 
       </nav> 
 
       </div> 
 
       <div class="column">   
 
       <nav> 
 
        <h4 class="hl--list footer__hl">Social</h4> 
 
        <ul> 
 
        <li> <a class="footer__link">Facebook</a></li> 
 
        <li><a class="footer__link">Twitter</a></li> 
 
        <li><a class="footer__link">Youtube</a></li> 
 
        </ul> 
 
       </nav> 
 
       </div> 
 
      </div> 
 
      </footer>