Центрирования IMG внутри сНа

Question

Im пытается центрировать (pumpkinvector.jpg) изображение внутри .div, используя этот классический трюк:

.pumpkin{ 
position: relative; 
top:50%; 
left:50%; 
transform: translate(-50%,-50%); 
} 

Это, кажется, работает хорошо на самый день DIV, где фон является красным. Тем не менее, это был просто тест, мне не нужен образ для центра.

Мне нужно центрировать pumpkinvector.jpg изображение вверху в «grid2» div, что внутри «grid 6 october» div. Октябрьский div имеет дополнительный код и внутренний класс, чтобы дать фоновое изображение и сделать его пропорционально пропорциональным по высоте и ширине%. Используя тот же самый центрирующий код выше, pumpkinvector.jpg теперь переходит к следующей строке и начинает позиционировать вне div .october. Может кто-то, почему это?

Пожалуйста, возьми меня здесь. Я думал, что добавление изображений помогает визуализировать мою проблему, поэтому я загрузил ее на свой сайт вместо js.fiddle. Вот эта ссылка: http://jingsportfolio.com/october.html

Просим, ​​пожалуйста, изучить исходный код. Благодарю.

Этот вопрос отличается тем, что он спрашивает, как центрировать div в том контексте, что его родительский div имеет сложную разметку, которая делает любое традиционное центрирование и вбрасывается на новую строку ниже родительского div.

Answer 1

Проверить этот маленький пример, вероятно, будет полезно, как центрировать изображение внутри DIV

HTML-код:

<div class="parent"> 
    <img src="http://45reu03dndd711szsx3satxn.wpengine.netdna-cdn.com/wp-content//uploads/2015/08/Top-10-best-CSS-development-tools-2015.png"/> 
</div> 

Код CSS:

.parent { 
    text-align: center; 
    width: 100%; 
    border: 1px solid #ccc; 
} 

img .picture { 
    width: 40px; 
    height: 40px; 
} 

Этот код является бег here

Answer 2

Горизонтальное выравнивание очень просто с CSS :

• деталь вы хотите выровнять должен иметь «запас: авто»
• И обертку пункт должен иметь фиксированную ширину.

Вертикальное выравнивание немного сложнее:

• Этот трюк работает только если обертка имеет фиксированную высоту, а содержимое для выравнивания является текстовым тегом как пролете или р или h1

• используйте атрибут css строки-высоты обертки и установите его значение на свою собственную высоту, и это будет сделано.

  ИЛИ

• если содержание выравнивать имеет высоту 300px использования маржи-топ: известково (50% - 150px)
• изменения 'Верхнее поле' абсолютного "положение" и «топ "при необходимости