Vertically align content inside XY-Grid Cell

Question

Using ZURB Foundation XY-Grid, I want to vertically center a cell's content, while still being able to have the cells fill the total height of the grid (for each cell to have it's own background image), which doesn't allow using the class ".align-middle" on the parent grid, since the cell height is then collapsed.

I want to be able to do this with a solid solution that will work on many different types of content, where you don't know the name and the height of the grid, so I am not looking for some specific hacks.

I have tried making the cell a flex-container, by adding the class ".flex-container", this allows me to add a class to vertically align the content, but I am hesitant to move away from the intended use of XY-grid, since it may create some other challenges that I am not forseeing now.

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

The code above renders the cells correctly but with the text at the top of the cell.

Answer 1

You'll need another grid-x and an align-middle on the containers that have the background. The div inside those will be centered. Like so:

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