垂直对齐将图像放在div中的标记中 [英] Vertical Align Middle an image in an a tag in a div

问题描述

这可能以前已经完成，但我找不到针对我的具体案例的解决方案。我有以下内容：

 < div class =holderstyle =height：260px; width：260px;> ; 
< a href =＃>< img src =image.jpg/>< / a> 
< / div> 
  

如何将图像对齐到div的中间？

解决方案

通常，img是一个内联元素，这意味着它与父元素文本的基线对齐。这会在您的图片下方留下一个令人讨厌的空间。

您可以使用

 <$ c来阻止此操作$ c> img {
 display：[inline-] block; / *或inline-block如果img不是div中的唯一元素* / 
} 
  

这将删除图像下方的保留空间。

您可以通过

<$ p $更改对齐方式p> img {
vertical-align：[top | middle | bottom | baseline | ...];
}


根据你的文字对齐它。

通常，您只能垂直对齐内联元素。因此，带有 display：block 的图像不会受垂直对齐声明的影响。

This has probably been done before but I can't find a solution for my specific case. I have the following:

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

How can I get the image to align into the middle of the div?

解决方案

Normally, img is an inline-element, which means, that it's being aligned to the baseline of the text of your parent-element. This leaves a nasty space underneath your image.

You can prevent this with

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

This removes the reserved space underneath the image.

you can change the alignment by

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

to align it according to your text.

In general, you can only vertical-align inline elements. So an image with display:block won't be affected by a vertical alignment declaration.

这篇关于垂直对齐将图像放在div中的标记中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！