Как внутри блока отцентрировать изображение по вертикали?

Question

[html-css]

Здравствуйте. Подскажите, пожалуйста, как внутри блока отцентрировать изображение по вертикали? При этом не прибегая к изменению свойства display. Сейчас стоит так:

display:block
overflow: hidden

Comments

[Rustam Bainazarov]

Нормально — никак, если только жёстко задать соотношение сторон, а картинку — на absolute.

Покажите полный код и поясните, почему нельзя трогать display.

[html-css]

Рустам Байназаров, да хз. не хотел затрагивать стили
но вижу так не получится
есть высота блока
если дать блоку
display:flex
align-items:center
это будет правильно?

[html-css]

а через object-fit нельзя спозиционировать?

[Анатолий Куликов]

Если у вас что-то типа такого:

<div>
   <img />
</div>

то с помощью flexbox можно хоть по горизонтали, хоть по вертикали отцентрировать.

[Rustam Bainazarov]

html-css, object-fit влияет на shadow DOM картинки. Вам же надо саму картинку сдвинуть.

Почему flex — это плохо? Это хорошо.

[html-css]

Анатолий Куликов, почти
есть тег a он display:block
внутри него div > img
как правильно отцентрировать?
если я задам a{display:flex; align-items:center}
?

[html-css]

просто смысл в том
что а overflow:hidden
height:200px;

т.е что бы если изображение по высоте отличается, что бы верстка не разлезлась я так понял

[html-css]

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

[Rustam Bainazarov]

html-css, вот:

[Rustam Bainazarov]

html-css, какой ещё говнокод, когда это для этого и предназначено?

[html-css]

Рустам Байназаров, Спасибо
я как раз выше о align-items и задавал вопрос

[html-css]

Рустам Байназаров, да. там кроме изображений позиционирования элементов есть множества
по этому думал есть способ display не менять

[Rustam Bainazarov]

html-css, как тогда можно выравнивать только картинку, не затрагивая другие элементы? Боксовая модель это не позволяет, элементы знают друг о друге. Поэтому я и говорю про показ либо кода, либо макета, а лучше того и другого.

[html-css]

Рустам Байназаров, другие элементы position:absolute
все. проблема решена
Благодарю
почему вы в комментарии пишете?
я не могу ваш коммент отметить решением

[Rustam Bainazarov]

html-css, если другие элементы на absolute'е, то да, проблемы не будет, если я правильно понял структуру.

[html-css]

Рустам Байназаров, все правильно
Спасибо
отметил

Answer 1

[Rustam Bainazarov]

Answer 2

[Сергей delphinpro]

Если высота у вас фиксированная, можно использовать классику: