垂直对齐将图像放在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

尝试：

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

Answer 4

如果这是你的标记，那么你可以使用line-height属性。像这样：

.holder{
    line-height:260px;
}