垂直对齐 XY-Grid 单元格内的内容 [英] Vertically align content inside XY-Grid Cell

查看：24
本文介绍了垂直对齐 XY-Grid 单元格内的内容的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

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

我曾尝试通过添加类.flex-container"使单元格成为弹性容器，这允许我添加一个类来垂直对齐内容，但我犹豫是否要远离预期用途XY 网格，因为它可能会带来一些我现在无法预见的其他挑战.

<div class="grid-x" style="height: 100px;"><div class="cell small-6 this-cell-has-background-and-need-to-stretch">这是我想要垂直居中的文字
<div class="cell small-6 this-cell-has-background-and-need-to-stretch">这是我想要垂直居中的文字

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

解决方案

您需要在具有背景的容器上使用另一个 grid-x 和一个 align-middle.这些里面的 div 将居中.像这样:

<div class="grid-x" style="height: 100px;"><div class="cell small-6 grid-x align-middle" style="background:green;"><div>这是我想要垂直居中的文本</div>
<div class="cell small-6 grid-x align-middle" style="background:red;"><div>这是我想要垂直居中的文本</div>

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.

解决方案

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>

这篇关于垂直对齐 XY-Grid 单元格内的内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆