如何在div中垂直居中图像 [英] How to vertically center image inside div

问题描述

我有这样的标记：

 < div& 
< img /> 
< / div> 
  

div高于img：

  div {
 height：100px; 
} 
 
 img {
 height：dynamic-value-smaller-than-100px; 
} 
  

我需要图像在div的中间

 >  div {
 vertical-align：middle; 
} 
  

解决方案

，那么它可能是一个更语义的解决方案使用它作为背景图像。您可以指定背景的位置

  background-position：center center; 
  

如果它不是装饰性的，构成有价值的信息，那么img标签是合理的。在这种情况下你需要做的是样式包含div具有以下属性：

  div {
 display： table-cell; vertical-align：middle 
} 
  

阅读更多这方面的技巧。报告为不工作在IE6 / 7（在IE8上工作）。

I have a markup like this:

<div>
  <img />
</div>

The div is higher than img:

div {
  height: 100px;
}

img {
  height: dynamic-value-smaller-than-100px;
}

I need the image to be in the middle of the div (have same amout of white space above and below it).

I tried this and it does not work:

div {
  vertical-align: middle;
}

解决方案

if your image is purely decorative, then it might be a more semantic solution to use it as a background-image. You can then specify the position of the background

background-position: center center;

If it is not decorative and constitutes valuable information then the img tag is justified. What you need to do in such case is style the containing div with the following properties:

div{
    display: table-cell; vertical-align: middle 
}

Read more about this technique here. Reported to not work on IE6/7 (works on IE8).

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