zentrieren Text horizontal in einer Flexbox-Spalte

Question

Ich versuche, eine einfache Fußzeile mit Flexbox zu erstellen. Aber ich möchte den Textblock innerhalb der Flexbox-Spalte zentrieren, nicht text-align: center, sondern den Textblock innerhalb der Spalte zentrieren. Hier

ist ein 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

haben Sie einen Blick auf JSFiddle unten. Ich schlage vor, dass Sie% nicht im Stylesheet verwenden, sondern "cols". Was Sie suchen ist:

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

Es ist für zentralisieren Inhalt in einer Flex-Box Spalte ohne text-align verwendet wird.

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>