Помогите отцентрировать картинку

Здравствуйте, я начинающий и у меня уже который день не получается сделать картинку по центру поста, подскажите пожалуйста. Какой класс в CSS надо изменить, чтобы картинка встала по центру? Ссылка http://21idea.ru/sekrety-vkusnogo-bljuda/

 

.featured-media img
display: block;
margin: auto;
}
это для верхней картинки

.alignnone {
display: block;
margin: auto;
}

Это для нижней

 

Или для всех картинок поста:
.post img {
margin: 0 auto;
display: block;
}

Правда в .post входят и комментарии зачем-то. Но это уже косяк шаблона.

 

Спасибо большое, а то я несколько дней не мог понять какой именно класс изменять. Вы очень помогли мне.

--- Добавлено, 26 ноя 2017 ---

У меня еще один вопрос, как убрать эффект увеличения на картинке на странице "Об авторе" http://21idea.ru/ob-avtore/ У нее такие же эффекты как и у картинок на главной странице http://21idea.ru/ . Мне необходимо чтобы на главной странице эти эффекты были, а на странице "Об авторе" таких эффектов не было, а была бы просто статичная картинка.

--- Добавлено, 26 ноя 2017 ---

P.S. эффект увеличения происходит при наведении на картинку (hover)

 

Попробуйте добавить
.post-header ~ .features-media a:hover img {
-webkit-transform: none !important;
}

 

Работает, но при этом задевает картинки на главной странице, а мне хотелось бы, чтоб на них эффект этот остался

 

Может можно через админку присвоить дополнительный класс для картинки из раздела "об авторе"?

А вообще, там ссылка стоит. Из-за неё, как я понял, происходит эффект. Так как в "Статья 1, 2, 3..." такого эффекта не наблюдается и ссылки там нет. Ссылка идёт сама на себя /ob-avtore/

 

Да, вы совершенно правы, спасибо, убрал ссылку и убрались эффекты. Порой до элементарности додуматься всех труднее.

 

центрировать элементы лучше флексбоксами

примерно так родителю присвоить :

display: -moz-flex;
display: -webkit-flex;
display: -ms-flex;
display: flex;

-moz-flex-direction: row; ()
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;

-moz-justify-content: space-between;
-webkit-justify-content: space-between;
-ms-justify-content: space-between;
justify-content: space-between;

align-items: center;

Здесь понятно написано: http://html5.by/blog/flexbox/

если нужно выровнять по вертикали без флекс боксов, всем элементам присвоить свойство
display: inline-block;
и хотябы одному из них
vertical-align: middle;

Но может повлиять на отображение свойства родительского блока

изображение само по себе воспринимается как строковый элемент, поэтому для горизонтального центрирования достаточно в пределах родительского блока
text-align: center;

если родительский элемент со свойством display: inline-block; без указания размеров блока, то центрировать придется родительский блок