Intereting Posts
Как применить class CSS при наведении на динамически создаваемые кнопки отправки? Автоматическое переполнение не работает с оправданием-содержимым: flex-end Динамическая ширина входного текстового поля (HTML) Скрыть значения из источника страницы, но показать на странице Представление формы с использованием запроса даты PHP / MySQL на страницу Google Visualization Показать скрытые элементы на основе ID из раскрывающегося списка javascript Как запустить скрипты Ruby / Python из PHP, проходящих и принимающих параметры? представить несколько форм Изменить фоновый цвет видеоэлемента html5 Когда следует использовать tags div, когда у меня уже есть опция для разделения страницы с тегом Table Обнаруживать, если пользователь нажимает внутри круга Управление содержимым iframe с помощью javascript / html Стилизация текста, чтобы он казался над линией (для аккордов над лирикой) почему нижний тег ниже, чем интервалы в IE Как отключить границу изображения в IE

Как центрировать img внутри div

Я пытаюсь что-то, что должно быть довольно легко, но я не могу понять, как это сделать.

У меня есть источник html:

`

И некоторые css:

 .product { width: 460px; height: 460px; } .product img { margin: auto; display: block; } 

Мое изображение хорошо горизонтально, но не вертикально. Я пробовал с некоторой position: relative; / bottom: 0; position: relative; / bottom: 0; но ничего не изменило …

Есть идеи, ребята?

Спасибо за помощь !

PS: Я нашел этот центр решений внутри

с CSS, но я предпочел бы сохранить мой HTML как это, и кажется невероятным, что он не сможет сделать это «мой» путь.

Попробуйте это – http://jsfiddle.net/tG9UK/

 .product { width: 460px; height: 460px; display: table-cell; vertical-align: middle; } 

Если вы хотите центрировать как по вертикали, так и по горизонтали, вы должны иметь возможность применять отображение: table-cell к div и использовать вертикальное выравнивание

 .product { display: table-cell; vertical-align: middle; text-align: center; width: 460px; height: 460px; } .product img { margin: auto; display: block; } 
 .product { width: 460px; height: 460px; line-height:460px; text-align:center; } 

http://jsfiddle.net/EHTeL/1/

Если размеры изображения статичны, то что-то вроде этого будет работать для вас

 .product img { position: absolute; top: 50%; left: 50%; width: 300px; height: 300px; margin-top: -150px; /* Half the height */ margin-left: -150px; /* Half the width */ }