html - 图像不垂直对齐中间 div

Question

我正在尝试将图像插入到 div 中，但它没有居中对齐。

你能帮我么 ！

<div style="width:200px; height:200px; flaot:left; margin:0; padding:0;"><img src="image.png" width="100" height="100" /></div>

Answer 1

<img style="vertical-align:middle;" src="image.png" width="100" height="100" />

Answer 2

如果你知道所有尺寸（div 和 img），你可以使用类似的东西：tinkerbin

CSS：

#content{
    width: 200px;
    height: 200px;
    margin: 0;
    padding: 0;
    float: left;
    line-height: 200px;
}

#content img{
    vertical-align: middle;      
}
​

HTML：

<div id="content">
    <img src="http://placekitten.com/120/120" width="100" height="100" />
</div>​

或者更多版本：tinkerbin

CSS：

#content{
    width: 200px;
    height: 200px;
    margin: 0;
    padding: 0;
    float: left;
    position: relative;
}

#content img{
   position: relative;
   top: 50%;
   margin-top: -50px;
}

Answer 3

我通常使用它并且它有效...

<div style="width:200px; height:200px; margin:0; padding:0; display: table-cell; vertical-align: middle;"><img src="image.png" width="100" height="100" /></div>

Answer 4

当您知道所涉及的高度时，您可以使用负边距来实现这一点：

<div style="width:200px; height:200px; float:left; margin:0; padding:0;"><img src="image.png" width="100px" height="100px" style="margin-top: -50px" /></div>

Answer 5

嘿，现在习惯于在你的CSSDispaly:table-cell中属性和删除 float:left;

像这样

css

.parent{
  width:200px; 
  height:200px;
 text-align:center;
  display:table-cell;
  vertical-align:middle;
  margin:0; padding:0;
  background:red;
}

html

<div class="parent">
  <img src="http://outgrow.me/wp-content/uploads/2012/06/ramos-305x203.jpg" width="100px" height="100px" />
</div>

现场演示http://tinkerbin.com/4IU9UvR9