Я пытаюсь центрировать горизонтально изображение в колонку zurb, но это кажется невозможным. Я пробовал все, искал везде, но я не могу заставить его работать.
Вот мой код:
<div class="row">
<div class="twelve columns"><br />
<img src="img_06.jpeg" alt="slide image">
</div>
</div>
в настоящее время пейзажные изображения в порядке на 12-ти столбчатой сетке, но когда происходит портретное изображение, оно находится в левой части сетки. Если я даю ему 25% отступов, он попадает в центр, но я использую php, чтобы вытащить все изображения из папки и генерировать код "на лету", поэтому я не могу иметь 25% отступов на всех изображениях ( пейзажные сжимаются).
Спасибо
Изменить ноябрь 2015: В Foundation 6 выйдите из Помощники по типографии
Редактировать апрель 2014: В Foundation 5 проверьте уроки.
Оригинальный ответ:
Используйте класс текстового центра.
<div class="row">
<div class="twelve columns text-center"><br />
<img src="img_06.jpeg" alt="slide image">
</div>
</div>
Попробуйте добавить центрированный класс.
.five.columns.centered
Просто добавьте класс "text-center"
Использование фундамента 4:
HTML:
<div class="row">
<div id="wrap-img" class="large-12 columns"><br />
<img src="img_06.jpeg" alt="slide image">
</div>
</div>
CSS
#wrap-img img { margin: 0 auto; }
Единственный способ получить изображение, центрированное в Foundation 4, - это изменить отображение: block; для img вместо отображения: inline-block;