Question

我知道有多种方法可以在div中垂直对齐图像，正如此处所指出的那样：How to vertically align an image inside div

尽管如此，根据我自己的测试，我很好奇为什么下面的内容在粘贴到.htm文件并且在Chrome 39或IE 11中打开时似乎没有中间对齐，但在JSFiddle中运行得很好：{{ 3}}

是否有一些我完全不知道的东西？

感谢。

<html>
  <head>
    <title>test</title>
  </head>
  <body>
    <div style="height: 300px; line-height: 300px;background-color:green;"> 
      <img width="70" height="70" style="vertical-align:middle; background-color:blue;" alt="" src="image.png">
    </div>
  </body>
</html>

Answer 1

我用来垂直对齐的最佳方式是

position:absolute;
top:0;
bottom:0;
margin:auto;

它可以在IE（甚至8和7）中使用，为什么不试试呢？

如果你想要绝对中心，只需使用

position:absolute;
left:0;
right:0;
top:0;
bottom:0;
margin:auto;

..这样就可以了解

PS：有人问为什么这是最好的方式，没有机会看到它是谁，问题被迅速删除了......我的答案很简单，我从未遇到过任何问题奇怪的行为或异常与这种方法，所以，对我来说，这是一个简单，简单和基本的方式，因此，最好。

Answer 2

在这种特定情况下，它在小提琴之外呈现不同的原因是因为它们使用<!DOCTYPE html>，而你正在使用<html>（怪癖模式）。随意尝试。

您可以在此处详细了解怪异模式的奇怪之处：http://www.cs.tut.fi/~jkorpela/quirks-mode.html

在div中垂直对齐图像的问题

2 个答案: