垂直对齐 XY-Grid Cell 内的内容

Question

使用 ZURB Foundation XY-Grid，我想将单元格的内容垂直居中，同时仍然能够让单元格填充网格的总高度（每个单元格都有自己的背景图像），这不会不允许在父网格上使用 class“.align-middle”，因为单元格高度会折叠。

我希望能够使用一个适用于许多不同类型内容的可靠解决方案来做到这一点，您不知道网格的名称和高度，所以我不是在寻找一些特定的内容黑客。

我已经尝试通过添加 class“.flex-container”使单元格成为一个弹性容器，这允许我添加一个 class 来垂直对齐内容，但是我我对放弃 XY 网格的预期用途犹豫不决，因为它可能会带来一些我现在没有预见到的其他挑战。

<div class="grid-container">
            <div class="grid-x" style="height: 100px;">
                <div class="cell small-6 this-cell-has-background-and-need-to-stretch">
                    This is the text I want vertically center
                </div>
                <div class="cell small-6 this-cell-has-background-and-need-to-stretch">
                    This is the text I want vertically center
                </div>
            </div>
        </div>

上面的代码正确地呈现了单元格，但文本位于单元格的顶部。

Answer 1

您需要在具有背景的容器上再添加一个 grid-x 和一个 align-middle。其中的 div 将居中。像这样：

<div class="grid-container">
    <div class="grid-x" style="height: 100px;">
        <div class="cell small-6 grid-x align-middle" style="background:green;">
            <div>This is the text I want vertically center</div>
        </div>
        <div class="cell small-6 grid-x align-middle" style="background:red;">
            <div>This is the text I want vertically center</div>
        </div>
    </div>
</div>

垂直对齐 XY-Grid Cell 内的内容

Vertically align content inside XY-Grid Cell

css

zurb-foundation

xy-grid