Question

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

我希望能够通过一个可靠的解决方案来做到这一点，该解决方案可以在许多不同类型的内容上工作，而您不知道网格的名称和高度，因此我不打算寻找一些特定的技巧。

我曾尝试通过添加类“ .flex-container”使该单元格成为flex容器，这使我可以添加一个类来垂直对齐内容，但是我犹豫要离开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网格单元格内垂直对齐内容

1 个答案: