Выравнивание по вертикали по центру для изображений в сетке фундаментных блоков

Question

Выравнивание по вертикали по центру для изображений в сетке фундаментных блоков

0

Я использую Zurb Foundation 4 в первый раз, когда вы создадите сайт маленькой картинки для друзей.

Тестирование @http://wagonbroadcastservice.org/ktest/

Макет должен быть довольно простым: сетка изображений. Использование "блок-сетки" казалось подходящим, но проблема, с которой я столкнулся, заключается в том, что мне нужно, чтобы каждое изображение было вертикально выровнено по середине, а не сверху каждой строки. У меня возникли проблемы с выяснением того, какой код мне нужен.

Я наткнулся на один поток, который, как я думал, мог бы ответить на мои вопросы, но предлагаемый ответ, похоже, не работает вообще. Не удается получить изображение для выравнивания в нижней части div с помощью класса block-grid Foundation

Кто-нибудь знает, что я могу делать неправильно?

Netsurfer 21 сен. 2013, в 11:19

Источник

Теги:

html

zurb-foundation

css

css3

1 ответ

Ещё вопросы

Netsurfer · Accepted Answer · 2013-09-21T07-15-00.000Z

Ваша фактическая "проблема" вызвана этим правилом стиля (в строке 1123 app.css):

[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. установите размер шрифта родительского элемента равным '0'

Использование Frameworks - это не всегда лучшее/простое решение! ;-)
И поскольку я не знаю "Zurb Foundation 4", я больше не могу вам помочь, извините.

Большое спасибо за ваше предложение. Это работает довольно хорошо. Мне нужно было также настроить процент «in.large-block-grid-3> li», но это исправило это. Ура!
Пожалуйста! Рад, что это работает для вас.
Я только что заметил, что «встроенный блок» на самом деле убивает отзывчивость сетки специально для Firefox. Я не уверен почему. Как только вы доберетесь до точки останова на FF, изображения не будут сжиматься до мобильных устройств, как в Safari или Chrome. К вашему сведению!
Попробуйте убрать display: inline-block; из [class*="block-grid-"] в строке 1107. И добавьте max-width: 100%; to [class*="block-grid-"] > li в строке 1123.