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

[Extalionez]

Доброго времени суток! Есть несколько изображений разного размера. Нужно разместить их в центре блоков div одинакового размера. во вложении пример

 

[icydrago]

div{
line-heght: высота дива;
text-align: center;
}
div img{
vertical-align: middle;
}

Должно работать.

 

[Guyri]

Правильнее будет делать

<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]

Правильнее будет делать

<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; /* ну тут понятно что самый центр в отношении всего*/

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

Как ни странно, но такой вариант google мне предлагал. Пробовал - не получилось. Может потому что у меня изображения в ссылке?

 

[icydrago]

Правильнее будет делать

<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; /* ну тут понятно что самый центр в отношении всего*/

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

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

Насчет вертикальной ошибся.
За такой варварски «простой» метод при правке шаблона, ковыряющихся до меня верстальщиков на работе, я порой невольно хочу застрелить того человека, он может подойти контенщику при верстке текста(и то под вопросом), но ни как не при верстке шаблона к сайту или модулю.

При большом коде текста надо использовать оптимальные решения, и более краткие превращая все в одно действие класса, но ни в маток набитого css

to Extalionez
Пробуйте этот

div img {
    position: relative;
    top:50%;
    left:50%;
}

даже можете вместо img поставить тег ссылки a

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

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

 

[MrJenika]

Еще вариант задать диву свойство
display: table-cell;
И собственно vertical-align: middle;

 

[noxxxxx]

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

 

[swa1ps]

div{
line-heght: высота дива;
text-align: center;
}
div img{
vertical-align: middle;
}


Согласен с Для просмотра ссылки Войди или Зарегистрируйся. Не знаю насколько правильный способ, но 100% рабочий

 

[Grave1986]

а если так?

<div style="background: url(image.png) center no-repeat;background-size: contain;"></div>

 

[icydrago]

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