Question

我有一个复杂的嵌套行＆amp;使用Zurb Foundation的列布局。我想用文本＆＃39; .grid-text＆＃39;来制作div。与行的高度相同。我已经尝试过各种策略来做到这一点，但它最终打破了flexbox垂直文本居中。我还搜索了StackOverflow问题，没有人解决这个问题。

我最终使用了基金会的均衡器，但由于某种原因它不起作用。有什么建议？我对不同的策略持开放态度。

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

然后确保Foundation已初始化：

$(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中进行水平居中。

我在.inner div中添加了div .grid-text。然后我添加了以下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;
}

但当然要测试尺寸是否合适。

用基础（均衡器）将div设置为行高

2 个答案: