基础块网格中图像的中间垂直对齐

Question

我第一次使用 Zurb Foundation 4 来构建朋友的小型图片作品集网站。

测试@http://wagonbroadcastservice.org/ktest/

布局非常简单：图像网格。使用“块网格”似乎是合适的，但我遇到的问题是我需要每个图像垂直对齐到中间，而不是每行的顶部。我在弄清楚我需要什么代码时遇到问题。

我遇到了一个帖子，我认为它可能已经回答了我的问题，但建议的答案似乎根本不起作用。 Can't get image to align to bottom of div with Foundation block-grid class

有人知道我做错了什么吗？

Answer 1

您的实际“问题”是由这种样式规则引起的（在 app.css 第 1123 行）：

[class*="block-grid-"] > li {
display: inline;
float: left;
height: auto;
padding: 0 0.625em 1.25em; }

您可以通过将规则集更改为：

[class*="block-grid-"] > li {
display: inline-block;
height: auto;
padding: 0 0.625em 1.25em; }

inline-block 还有一些其他的缺点，比如空白问题。有 2 个选项可以避免元素之间不需要的边距：
1. 从 HTML 标记中删除所有空格和换行符
2.设置父元素的font-size为'0'

使用框架并不总是最好/最简单的解决方案！ ;-)
由于我不知道“Zurb Foundation 4”，我无法为您提供更多帮助 - 抱歉。