圖片未垂直對齊中間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 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