Центрирование картинок по вертикали

Тема в разделе "Верстка", создана пользователем nomak11, 17 ноя 2014.

Информация :
Уважаемые пользователи, прежде чем ответить в теме или создать новую, внимательно ознакомьтесь с Правилами раздела и Правилами форума
Для быстрого поиска ответов на ваши вопросы воспользуйтесь Картой раздела и/или Поиском по разделу
Статус темы:
Закрыта.
Модераторы: ultra
  1. nomak11

    nomak11 Постоялец

    Регистр.:
    17 ноя 2013
    Сообщения:
    99
    Симпатии:
    9
    Добрый день. Помогите отцентрировать фото по вертикали http://alexandrprokopovich.by/proekty Нужно, чтобы фото автоматически становилась в центре рамки, а не прилипала к верхнему краю.
     
  2. BaBL

    BaBL Постоялец

    Регистр.:
    13 ноя 2012
    Сообщения:
    144
    Симпатии:
    87
    Вам мешает вот это:
    Код:
    html, body, div, span, h1, h2, h3, h4, h5, h6, p, a, em, font, img, strong, b, u, i, sup, sub, center, dl, dt, dd, ol, ul, li, form, label, table, tbody, tfoot, thead, tr, th, td {
    vertical-align: baseline;
    
    на самой картинке, сделайте middle (но только для картинки или картинки в определенном блоке, иначе все поедет)

    и задайте тэгу "a" или li нормальный height и равный ему line-height.

    К примеру:
    Код:
    li a {
    height: 210px;
    line-height: 210px;
    }
    
    и картинки отцентрируются.

    Но я бы сделал по другому. Лучше в тэг Li поставить бэкграундом картинку с настройками background-position: center center;
     
    nomak11 нравится это.
  3. ZOLK

    ZOLK

    Регистр.:
    13 сен 2011
    Сообщения:
    189
    Симпатии:
    107
    В sigplus.min.css 2 строка в div.sigplus-gallery > ul > li
    меняете height: 200px;
    меняете display: table;
    добавляете float: left;

    В template.css 124 строка .art-postcontent a, .art-postcontent a:link
    Добавляете
    display: table-cell;
    vertical-align: middle;


    Еще у вас лого съехал, чтобы вернуть его в template.css на 465 строке в .art-header {
    Удалите строчку background-position: center top;

    Можно еще меню по вертикали выровнять, в том же файле на 504 строке в .art-nav { добавьте
    top: 17px;
     
    Последнее редактирование: 17 ноя 2014
    nomak11 нравится это.
  4. Krox

    Krox Создатель

    Регистр.:
    13 ноя 2014
    Сообщения:
    11
    Симпатии:
    7
    margin: auto;
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
     
Статус темы:
Закрыта.