基础Zurb 6将内容集中在列中

Question

我有4列的页脚，如何居中列和行。我使用基础zurb 6.我应该为每列使用另一个div。使用flex，它很容易制作。应该像在图像上。

  $(document).foundation();

.footer-top {
  background-color: #466371;
  padding: rem-calc(45 0 40);
}
.footer-top ul {
  list-style-type: none;
}
.footer-top ul li {
  margin-bottom: rem-calc(11);
}
.footer-top ul li a {
  font-size: rem-calc(15);
}
.footer-top ul li span {
  margin-right: rem-calc(11);
}
.footer-top-title,
.footer-top a {
  color: #ffffff;
}
.footer-top-title {
  font-size: rem-calc(18);
  line-height: rem-calc(24);
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.2.3/foundation.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.2.3/foundation.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="footer-top">
            <div class="row" data-equalizer="equal-height">
                <div class="small-6 large-3 columns" data-equalizer-watch="equal-height">
                    <p class="footer-top-title">
                        About us
                    </p>
                    <ul>
                        <li><a href="#">Who we are</a></li>
                        <li><a href="#">Our products</a></li>
                        <li><a href="#">Success stories</a></li>
                        <li><a href="#">Events</a></li>
                        <li><a href="#">Career</a></li>
                    </ul>
                </div>
                <div class="small-6  large-3 columns" data-equalizer-watch="equal-height">
                    <p class="footer-top-title">
                        Quick links
                    </p>
                    <ul>
                        <li><a href="#">Software licensing </a></li>
                        <li><a href="#">Cloud solutions</a></li>
                        <li><a href="#">Services</a></li>
                        <li><a href="#">Our partners</a></li>
                        <li><a href="#">Video resources</a></li>
                    </ul>
                </div>
                <div class="small-6 large-3 columns" data-equalizer-watch="equal-height">
                    <p class="footer-top-title">
                        Contacts
                    </p>
                    <ul>
                        <li><span class="icon icon-phone"></span>
                          <a href="#">Elizabetes 75, Rīga,
                         LV - 1050, Latvija</a>
                       </li>
                        <li><span class="icon icon-phone"></span><a href="#">+371 67509900</a></li>
                        <li><span class="icon icon-phone"></span><a href="#">squalio@squalio.com </a></li>
                    </ul>
                </div>
                <div class="small-6 large-3 columns" data-equalizer-watch="equal-height">
                    <p class="footer-top-title">
                        Connect with us
                    </p>
                    <ul>
                        <li><span class="icon icon-phone"></span><a href="#">Instagram</a></li>
                        <li><span class="icon icon-phone"></span><a href="#">Linked In</a></li>
                        <li><span class="icon icon-phone"></span><a href="#">Twitter</a></li>
                        <li><span class="icon icon-phone"></span><a href="#">Yammer</a></li>
                        <li><span class="icon icon-phone"></span><a href="#">Youtube</a></li>
                    </ul>
                </div>
            </div>
        </div>

请参阅Codepen

上的结果

Answer 1

我为每个列内容创建了外部div，并制定了一些css规则： display：table; margin：0 auto。我得到了什么：

<div class="small-6 large-3 columns" data-equalizer-watch="equal-height">
              <div class="footer-top-menu centered">

                <p class="footer-top-title">
                  About us
                </p>
                <ul>
                  <li><a href="#">Who we are</a></li>
                  <li><a href="#">Our products</a></li>
                  <li><a href="#">Success stories</a></li>
                  <li><a href="#">Events</a></li>
                  <li><a href="#">Career</a></li>

                </ul>
              </div>
            </div>

   &-menu{
      &.centered {
        display: table;
        margin: 0 auto;
      }
    }

    @media screen and (max-width: 992px){
      .footer-top-menu.centered{
       width:50%;
       display:block;
        margin: 0 auto;
        }
   }

请参阅此处的代码Codepen

Answer 2

添加文本中心类：

<div class="footer-top"
  <div class="row columns large-10 large-centered text-center">
  ...
 </div>
</div/>