Question

我已经看到了一个非常简单的任务的多个问题：如何在div中垂直对齐图像。

.container {
    width:200px;
    height:200px;
    background-color: green;    
}
img.middle {    
    vertical-align:middle;
}
<div class="container">
    <img class="middle" src="test.gif" width="80" height="40" />
</div>

我的代码没有对齐图片。如何解决？

Answer 1

您可以使div的行为类似于表格单元格：

演示：http://jsfiddle.net/abhitalks/3cYtX/5/

.container {
    display: table-cell; /* make it behave like a table cell */
    vertical-align: middle; /* make it align contents vertically */
    text-align: center; /* make it align contents horizontally */
}

注意：正如James在评论中指出的那样，设置为table-cell的元素理想情况下应该是显示table或table-row的元素的内容。例如http://jsfiddle.net/abhitalks/3cYtX/8/

Answer 2

img个元素是inline个内容。这意味着您只需将.container元素设为line-height等于height和中心文字对齐：

.container {
    ...

    line-height: 200px;    /* Because height is 200px. */
    text-align: center;  
}

JSFiddle demo

Answer 3

.container{
     vertical-align:  middle;
     text-align:      center;
     line-height:     200px;
}

Answer 4

如果它是表格单元格，它只会垂直对齐：Mozilla Developer Network

.container {
    display: table-cell;
    vertical-align: middle;
}

还有其他方法：Link

.element {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%); /* Sorry had */ 
  -ms-transform: translateY(-50%);     /* to add these, then */
  transform: translateY(-50%);         /* it should center perfectly */                  
}

Fiddle

另外，这被提到是important：＆＃34;正如一些人所指出的，这种方法会导致元素模糊，因为元素被放置在“半像素”上”。对此的解决方案是将其父元素设置为preserve-3d。如下：＆＃34;

.parent-element {
  -webkit-transform-style: preserve-3d;
}

垂直对齐div中的图像

4 个答案: