Разместить изображения разных размеров в центре одноразмерных div'ов

Тема в разделе "Верстка", создана пользователем Extalionez, 23 янв 2013.

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

    Extalionez Клоун

    Заблокирован
    Регистр.:
    21 авг 2008
    Сообщения:
    368
    Симпатии:
    185
    Доброго времени суток! Есть несколько изображений разного размера. Нужно разместить их в центре блоков div одинакового размера. во вложении пример
     

    Вложения:

  2. icydrago

    icydrago Создатель

    Регистр.:
    21 янв 2013
    Сообщения:
    36
    Симпатии:
    3
    div{
    line-heght: высота дива;
    text-align: center;
    }
    div img{
    vertical-align: middle;
    }

    Должно работать.
     
    Extalionez нравится это.
  3. Guyri

    Guyri Создатель

    Регистр.:
    9 апр 2009
    Сообщения:
    40
    Симпатии:
    11
    Правильнее будет делать

    Код:
    <style>
    div {
        padding: 15px 0 15px 0;
    }
    div img {
        display:block;
        margin:0 auto;
    }
    </style>
    padding настраиваем для наличие отступов внутри этого дива, дабы лишние объекты не наезжали, но это в моем случаи, а так вам скорее всего понадобиться лишь div img не более

    display:block; /* нам нужен блочный элемент иначе не сработает*/

    Да и margin можете выставить себе нужный
    margin: 0 auto; /* централизовка по горизонтали*/
    margin: auto 0; /* централизовка по вертикали*/
    margin: auto; /* ну тут понятно что самый центр в отношении всего*/

    А за выше предложенное я бы руки обрубил.
     
    Extalionez нравится это.
  4. Extalionez

    Extalionez Клоун

    Заблокирован
    Регистр.:
    21 авг 2008
    Сообщения:
    368
    Симпатии:
    185
    Как ни странно, но такой вариант google мне предлагал. Пробовал - не получилось. Может потому что у меня изображения в ссылке?
     
  5. icydrago

    icydrago Создатель

    Регистр.:
    21 янв 2013
    Сообщения:
    36
    Симпатии:
    3
    margin: auto; Не выровняет по вертикали.
    Читайте 3 способа выравнивания блока по вертикали. Мной был предложен самый простой и подходящий в данном случае.


    Я почему-то до сих пор не вижу разницы. И в Вашем случае, и в моем надо прописать стили для дива и вложенного элемента.
    А последний Ваш способ не рабочий, т.к. сдвигает левый верхний УГОЛ (не центр) вложенного элемента на середину. Вы вообще проверяете свои советы на работоспособность перед отправкой?

    Добавлено Alex.Volk: Дабл
     
  6. MrJenika

    MrJenika Создатель

    Регистр.:
    4 мар 2012
    Сообщения:
    31
    Симпатии:
    3
    Еще вариант задать диву свойство
    display: table-cell;
    И собственно vertical-align: middle;
     
  7. noxxxxx

    noxxxxx Постоялец

    Регистр.:
    19 апр 2007
    Сообщения:
    132
    Симпатии:
    32
    А не проще вместо див-контейнера сделать саму ссылку?
    Задайте её дисплейный стиль блоком (или ячейкой таблицы), с отступами и размещайте картину внутри.
    В этом случае у вас так же весь блок будет ссылкой с картинкой, НО без лишних вложений.
     
  8. swa1ps

    swa1ps Писатель

    Регистр.:
    27 фев 2013
    Сообщения:
    6
    Симпатии:
    1
    div{
    line-heght: высота дива;
    text-align: center;
    }
    div img{
    vertical-align: middle;
    }


    Согласен с icydrago. Не знаю насколько правильный способ, но 100% рабочий
     
  9. Grave1986

    Grave1986 Писатель

    Регистр.:
    18 июн 2012
    Сообщения:
    7
    Симпатии:
    0
    а если так?
    Код:
    <div style="background: url(image.png) center no-repeat;background-size: contain;"></div>
     
  10. icydrago

    icydrago Создатель

    Регистр.:
    21 янв 2013
    Сообщения:
    36
    Симпатии:
    3
    Кстати, вспомнил ещё один тоже 100% работающий метод. Он лучше всего работает, если не известны размеры внешнего блока, но известны размеры внутреннего:
    img{ width: 100px; height: 100px; position: relative; left: 50%; top: 50%; margin-left: -50px; margin-top: -50px; }