Вертикально выровнять содержимое внутри ячейки XY-Grid

Question

Используя ZURB Foundation XY-Grid, я хочу вертикально центрировать содержимое ячейки, сохраняя при этом возможность заполнения ячеек общей высотой сетки (для каждой ячейки должен быть свой фоновый рисунок), что не позволяет использовать класс ".align-middle" в родительской сетке, так как высота ячейки затем свернута.

Я хочу быть в состоянии сделать это с помощью надежного решения, которое будет работать со многими различными типами контента, где вы не знаете имя и высоту сетки, поэтому я не ищу каких-то конкретных хаков.

Я попытался сделать ячейку flex-контейнером, добавив класс ".flex-container", это позволяет мне добавить класс для вертикального выравнивания содержимого, но я не решаюсь отойти от предполагаемого использования XY-grid, поскольку это может создать некоторые другие проблемы, которые я сейчас не вижу.

<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 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>