Как выровнять изображение по центру css: Как выровнять картинку по центру с помощью CSS

Leave a Comment / Css / By /

html — Как выровнять изображение по центру блока и оставить его в «полном размере»?

Задать вопрос

Вопрос задан

Изменён 6 лет 9 месяцев назад

Просмотрен 157 раз

Есть блок фиксированного размера

.item-img {
height: 255px;
width: 205px;
border: 1px solid #e5e5e5;}

В этом блоке изображение (могут быть разных размеров)
Нужно сделать что бы оно центрировалось и по горизонтали и по вертикали, и при этом оставалось пропорционально своим размерам Как такое сотворить?

  • html
  • css
  • вёрстка

В этом примере я изображение заменил на div. Но если убрать размеры и вставить картинку, то тоже сработает.

.block {
  width: 300px;
  height: 300px;
  background: black;
  position: relative;
}

.image {
  position: absolute;
  width: 120px;
  height: 160px;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  background: white;
}
<div>
  <div>
  </div>
</div>

0

Пробуйте так. Результат тут http://codepen.io/anon/pen/QyYrbp

<div>
  <img src="http://ftimes.ru/upkeep/uploads/2015/12/Google.jpg">
</div>
.block {
  width: 400px;
  height: 250px;
  background: black;
  position: relative;
}
.image {
  position: absolute;
  max-width: 100%;
  max-height: 100%;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  background: white;
}

1

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

На CSS как выровнять изображение по центру по вертикали?

  • Приглашаем модераторов в команду форума.