在flexbox列中水平居中文本

Question

我试图用flexbox创建一个简单的页脚。但是我希望将文本块置于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>