Установка div на высоту строки с основанием (эквалайзер)

Question

У меня сложная вложенная строка & расположение столбцов с использованием Zurb Foundation. Я хочу сделать divs с текстом «.grid-text» той же высоты, что и строка. Я пробовал различные стратегии, чтобы сделать это, но в итоге он разбивает вертикальное центрирование текста. Я также просматривал вопросы StackOverflow, и ни одна проблема не затрагивает эту проблему.

В итоге я использовал Equalizer Foundation, но по какой-то причине он не работает. Какие-либо предложения? Я открыт для разных стратегий.

http://codepen.io/anon/pen/bVNjyv

Я попытался JQuery и эквалайзер:

$(document).ready(function() { 
    var rowHeight=$('.v-align').height(); 
    $('.grid-text').height(rowHeight); 
}); 

<div class="row v-align" data-equalizer data-equalizer-mq="large-up"> 
     <div class="large-4 column b full-width"> 
      <div class="grid-text" data-equalizer-watch> 
      <h3>A</h3> 
      <p>text</p> 
      </div> 
     </div> 
     <div class="large-8 column full-width"> 
      <img src="http://placehold.it/2604x1302/00FFCC" data-equalizer-watch> 
     </div> 
    </div><!--/row9--> 

Answer 1

Для такого макета я стараюсь использовать Masonry, который отлично играет с Foundation.

Я не уверен, в какой среде вы используете, или если вы используете только codepen, но вы отсутствовали несколько JS файлы, которые Фонд требует, который я добавил к перу:

• jquery.js
• foundation.js
• foundation.equalizer.js

Затем убедитесь, что Фонд инициализирован:

$(document).foundation(); 

Я обновил свой HTML следующим образом:

<div class="row"> 
    <div class="show-for-large-up large-3 column full-width"> 
    <img src="http://placehold.it/1302x2604/FF3333"> 
    </div> 
    <div class="large-9 column"> 
    <div class="row" data-equalizer data-equalizer-mq="large-up"> 
     <div class="large-4 column b full-width"> 
     <div class="grid-text" data-equalizer-watch> 
      <div class="inner"> 
      <h3>A</h3> 
      <p>text</p> 
      </div> 
     </div> 
     </div> 
     <div class="large-8 column full-width" data-equalizer-watch> 
     <img src="http://placehold.it/2604x1302/00FFCC"> 
     </div> 
    </div> 
    </div> 
    <div class="large-6 columns full-width"> 
    <img src="http://placehold.it/2604x1302"> 
    </div> 
    <div class="show-for-large-up large-3 columns full-width last"> 
    <img src="http://placehold.it/1302x2604/FFFF99"> 
    </div> 
    <div class="large-9 columns"> 
    <div class="row" data-equalizer data-equalizer-mq="large-up"> 
     <div class="large-8 columns full-width" data-equalizer-watch> 
     <img src="http://placehold.it/2604x1302/FF9966"> 
     </div> 
     <div class="large-4 columns b full-width"> 
     <div class="grid-text" data-equalizer-watch> 
      <div class="inner"> 
      <h3>A</h3> 
      <p>text</p> 
      </div> 
     </div> 
     </div> 
    </div> 
    </div> 
</div> 

Что касается CSS центрирования Есть много способов, вы можете сделать это, большая статья читать на эту тему Centering in the unknown, который я часто ссылки. Я бы рекомендовал не использовать flexbox, поскольку он поддерживается только в последних браузерах. В этом случае я использовал метод ячейки таблицы, который, как мне кажется, лучше всего работает с горизонтальным центрированием в Foundation.

Я добавил div .inner внутри вашего .grid-text div. Затем я добавил следующие css:

.grid-text { 
    display: table; 
    text-align: center; 
    width: 100%; 
    // no need to set the height here 
    // as it's set by data-equalizer 
} 

.grid-text .inner { 
    display: table-cell; 
    vertical-align: middle; 
} 

Надеюсь, что это поможет.

http://codepen.io/thmsmtylr/pen/EVjXye

Answer 2

хорошо, если вы имеете в виду размер шрифта просто попробовать:

.v-align { 
     align-items: center; 
     font-size: 10px; 
} 

но тест на размер, который работает правильно, конечно.