css - Vertically align content inside XY-Grid Cell
问题描述
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.
解决方案
在具有背景的容器上,您需要另一个 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>
推荐阅读
- java - 如何检测 Scheduled SpringBoot 任务是否已死锁?
- python - 如何返回列表中出现元素的数量?
- python - python 3中for循环的工作有增量问题
- microsoft-graph-api - 使用 Microsoft Graph API 创建新邮件
- ios - 如何检查 WatchKit 应用程序是否已关闭或终止?
- excel - 我希望我的代码将工作表选项卡传输到我只知道部分名称的 excel 文件
- azure - 如何使用 Azure APIM 将 API 请求中的参数传递到后端 URL?
- python - 从 R 运行 python 脚本并获取返回的输出?
- python-3.x - 间接变量修改不适用于类,但适用于类之外(Python 3.7)
- mongodb - 如何按自定义顺序对mongodb数据中的数据进行排序