在 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;

它用于在不使用 text-align 的情况下集中 flex-box 列中的内容。

    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>