Выровнять по вертикали Посередине изображение в теге в div

Question

Возможно, это было сделано раньше, но я не могу найти решение для своего конкретного случая.У меня есть следующее:

<div class="holder" style="height:260px;width:260px;">
<a href="#"><img src="image.jpg" /></a>
</div>

Как мне выровнять изображение по центру div?

Answer 1

Обычно img является встроенным элементом, что означает, что он выравнивается по базовой линии текста вашего родительского элемента.Это оставляет неприятное пространство под вашим изображением.

Вы можете предотвратить это с помощью

img{
   display:[inline-]block; /* or inline-block if the img isn't the only element in your div*/
}

Это удаляет зарезервированное пространство под изображением.

Вы можете изменить выравнивание с помощью

img{
   vertical-align: [top|middle|bottom|baseline|...] ;
}

, чтобы выровнять его в соответствии с вашим текстом.

Как правило, вы можете выровнять только встроенные элементы по вертикали.Таким образом, объявление с display:block не будет затронуто объявлением вертикального выравнивания.

Answer 2

Попробуйте:

.img
{
display: block;
margin-left: auto;
margin-right: auto 
}

Answer 3

Если это ваша наценка, вы можете использовать для этого свойство line-height. Как это:

.holder{
    line-height:260px;
}

Answer 4

Добавьте

text-align: center;
vertical-align: middle; 
display: table-cell;

к стилю div.