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

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还有其他一些缺点，例如白点空间问题。有两个选项可以避免元素之间不必要的边距：
1.从HTML标记中删除任何空格和换行符 2.将父元素的font-size设置为'0'

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