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

如果你知道所有尺寸（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 4

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

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

嘿现在习惯Dispaly:table-cell属性，删除 float:left; css

就像这样

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

图像不垂直对齐中间div

5 个答案: