Вертикальное выравнивание Среднее изображение в теге в 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

Добавить

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

к стилю Div в.

Answer 3

Try:

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

Answer 4

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

.holder{ 
    line-height:260px; 
}