Основание Zurb 6 с центрированным содержимым в столбце

У меня есть нижний колонтитул с 4 столбцами, как центрированные столбцы и row.I использовать основание zurb 6. Должен ли я использовать другой div для каждого столбца. С flex, это будет легко сделать. Должно быть как на изображении. Основание Zurb 6 с центрированным содержимым в столбце

$(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="#">[email protected] </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>

См resulp на Codepen

источник

2016-10-15 Palaniichuk Dmytro

он смотрел центр экрана. В чем проблема? –

Содержат контент и столбцы, как центрировать содержимое внутри каждого столбца, но текст должен быть оставлен. Теперь все содержимое внутри столбца float осталось. –

Существует класс утилиты «text-center». http://foundation.zurb.com/sites/docs/typography-helpers.html –

Я создал внешний DIV для каждого содержимого столбца, и сделал некоторые правила CSS: дисплея: таблица, маржинальный: 0 авто. Что я получаю:

<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

источник

2016-10-15 19:52:32

просто добавьте класс 'text-center' вместо класса' centered'. –

Добавить класс текста центр:

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

источник

2016-10-25 02:20:42

Основание Zurb 6 с центрированным содержимым в столбце

ответ

Смежные вопросы