Вопрос

Необходимо выровнять блоки по вертикали. У меня верстка пока получается вот так http://skrinshoter.ru/s/160418/UDCfQwYu

Подскажите, как это сделать? Верстка респонсив.
Причем нужно чтобы и заголовки и цены тоже были на одном уровне

Почему то на codepen это немного по другому выглядит. Но все равно нужно это как то выровнять

Изменено пользователем yaparoff

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

Рекомендованные сообщения

  • 0
3 минуты назад, Switch74 сказал:

выравнивать нужно аналогично?

да. Но тут немного другая верстка

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
  • 0

ну возможно размер для заголовка в две строки и выравнивание по центру поможет?
а вообще пока не понятно что относительно чего нужно выравнивать по вертикали:
по центру, верху или низу

 

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
  • 0
2 минуты назад, Switch74 сказал:

ну возможно размер для заголовка в две строки и выравнивание по центру поможет?
а вообще пока не понятно что относительно чего нужно выравнивать по вертикали:
по центру, верху или низу

 

Меня больше всего смущает следующее:
Чтобы отцентровать изображение нужно знать высоту родительского блока. Но у родительского блока нет фиксированной высоты, т.к. она меняется постоянно из за ширины экрана

Как отцентровать изображение в данном случае?

Изменено пользователем yaparoff

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
  • 0

это все проценты и не проблема, основная проблема у вас сейчас что высота блока зависит от высоты картинки
задайте высоту блока и тогда у вас все будет выравниваться относительно него (я бы делал так)

 

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
  • 0

mrnobody, вы очередной раз удивляете меня своей магией!
Не до конца понимаю как это работает

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

Создайте аккаунт или войдите в него для комментирования

Вы должны быть пользователем, чтобы оставить комментарий

Создать аккаунт

Зарегистрируйтесь для получения аккаунта. Это просто!

Зарегистрировать аккаунт

Войти

Уже зарегистрированы? Войдите здесь.

Войти сейчас

  • Похожие публикации

    • Автор: hike
      В этом разделе автор предложил способ выравнивания слоя по центру веб-страницы при фиксированной высоте слоя.
       
      Есть ли способ выровнять слой по вертикали с помощью стилей, если высота блока неизвестна заранее (зависит от контента)?
       
      Например, http://codepen.io/anon/pen/waCKq?editors=110 Нужно, чтобы слой wrap отображался по центру веб-страницы для браузеров IE7+ и последних версий FF, Sa, Ch, Opera.
       
      Примечание: использование inline-block и псевдоэлемента wrap:before (для совместимости с IE7 в указанном выше примере display:inline-block установлен для строчного элемента span, а вместо псевдоэлемента использован span class="before"), увы, не привело к желаемому результату при высоте родительского слоя .wrap{height:100%}, хотя, как видно из примера, отлично работает для центрирования слоя krug внутри слоя ramka.
       
       
       
       
Html & Html5 & Css course


  • Спрашивают сейчас

  • Пишут сейчас

    • Дорогие Друзья! Рад вам сообщить о выходе новой версии движка Flextype и обновленном плагине Admin (Flextype 0.7.3 + Admin 0.3.0) 🚀 Это серьезное обновление для Flextype! Множество новых возможностей и фиксов улучшающие стабильность и производительность системы!  За эти 19 дней было потрачено более 100 часов на разработку и тестирование, запушено более 300 коммитов в репозитории проекта 👽 Изменения в Flextype 0.7.3: 
      - Flextype Компонент I18n обновлен до 1.2.0
      - Flextype Компонент Filesystem обновлен до 1.1.3
      - Symfony YAML Компонент обновлен до 4.2.1
      - Настройки теперь хранятся в одном settings.yaml файле
      - Content: добавлена возможность создавать скрытые страницы. Изменения в Admin 0.3.0:
      - Новая красивая админка в темном стиле! 
      (светлая тема будет в след. релизах)
      - Information: Страница информации отображает версию ядра и версию плагина админки
      - Users: теперь будут создаваться более безопасные пароли используя php функции password_hash и password_verify
      - Files manager: заменен на новый Media manager.
      - Pages Manager: улучшен функционал клонирования страниц. Теперь клонируется вся папка со страницей.
      - Pages Manager: исправлена бага с переименованием страниц #26 
      - Pages Manager: поле ссылки удалено из таблицы с страницами
      - Pages Manager: в быстрые экшена добавлена возможность просмотра страниц, ссылка открывает страницу в новом окне браузера.
      - Pages Manager: улучшено отображение вложенных страниц! теперь более наглядно отображаются вложенные страницы.
      - Pages Manager: исправлена бага с ссылкой на страницу по умолчанию, которая далее ломала логику работы с клонированными странницами.
      - Pages Manager: исправлена бага с пустым полем template
      - Pages Manager: добавлена возможность выбирать тему страниц при ее создании.
      - Pages Manager: много улучшений и исправлений в функционале по работе с страницами.
      - Pages Manager: Новый редактор страниц, редактор схемы (индивидуальные поля), редактор шаблона, редактор исходника страницы!
      - Plugins Manager: для плагина админки выключатель отключен, но отображается.
      - General: используется новые I18n 1.2.0 компонент.
      - General: используется новые Filesystem 1.1.3 компонент.
      - General: добавлена библиотека Gajus Dindent HTML для форматирование HTML кода, это позволяет сохранять красивый HTML после редактора!
      - General: добавлен Assets Manager для Javascript 
      - General: добавлен Animate.css для анимаций.
      - General: Fontawesome обновлен до 5.6.0 
      - General: Twitter Bootstrap обновлен до 4.1.3
      - General: Codemirror добавлен для лучшей работы с кодом.
      - General: es6-promise обновлен до 4.2.5
      - General: popper.js обновлен до 1.14.6
      - General: gulp-autoprefixer обновлен до 6.0.0
      - General: добавлена система отображения оповещений #41 
      - General: добавлена валидация форм jquery.form-validator.js
      - General: добавлено форматирование YAML файлов при их сохранении.
      - General: много общих улучшений архитектуры и скорости!
      - General: обновленная и улучшенная навигация!
      - Translates: много исправлений и улучшений в переводах. 
      Спасибо: Hmelex, AndiLeni, diomed Скачать Flextype 0.7.3
      https://github.com/flextype/flextype/releases/download/v0.7.3/flextype-0.7.3.zip Скачать Flextype 0.7.3 + Admin 0.3.0
      https://github.com/flextype/flextype/releases/download/v0.7.3/flextype-0.7.3-admin-0.3.0.zip Если у вас есть предложения по улучшению Админки и Ядра системы, пишите в комментариях и на официальном DISCORD сервере: https://discord.gg/tjEHXWD  
    • Большое спасибо за помощь, добавил с помощью теней по бокам  белые отступы и все получилось как в примере.
  • Лучшие авторы

  • Текущие цели пожертвований