图像不垂直对齐中间div

I am trying to inset the image in to the div but it's not align middle.

我试图将图像插入到div中，但它不是中间对齐。

Can you please help me !

你能帮我么 ！

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

5 个解决方案

#1

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

#2

You can use negative margins to achieve this, when you know the heights involved:

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

<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>

#3

I normally used this and it works...

我通常使用它，它的工作原理......

<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>

#4

If you know all sizes (div and img) you can use something like that: tinkerbin

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

CSS:

CSS：

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

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

HTML:

HTML：

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

Or one more version: tinkerbin

或者还有一个版本：tinkerbin

CSS:

CSS：

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

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

#5

Hey now used to Dispaly:table-cell properties and remove float:left; in your css

嘿现在习惯了Dispaly：table-cell属性并删除float：left;在你的CSS

As like this

就像这样

css

CSS

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

html

HTML

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

Live demo http://tinkerbin.com/4IU9UvR9

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