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

它用于在不使用文本对齐的情况下将内容集中在弹性框列中。

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%;
      }
    }