Question

我有一个<img>我希望以<div>为中心。我在这里找到的所有先前的答案都使用了一些黑客或要求你知道图像的宽度，这在我的情况下会有所不同。

在父级上使用text-align: center进行水平居中很容易。我无法弄清楚如何垂直对齐。

jsFiddle example

仅供参考，Facebook使用HTML和CSS做得很好。所以请不要<table>或javascript hacks。看起来他们正在使用line-height的内容使<img>垂直居中。

Answer 1

请注意，vertical-align: middle;本身并不有用，您还需要设置行高：line-height:400px;。

如果您的<div>中没有其他文字（除了可能只有一行），此功能非常有用。

工作示例：http://jsfiddle.net/kobi/ZfMYy/5/

Answer 2

在css类中添加规则：

 {vertical-align:middle;}

Answer 3

html, body, #wrapper {
   height:100%;
   width: 100%;
   margin: 0;
   padding: 0;
   border: 0;
}
#wrapper td {
   vertical-align: middle;
   text-align: center;
}


<html>
<body>
   <table id="wrapper">
      <tr>
         <td><img src="logo.png" alt="" /></td>
      </tr>
   </table>
</body>
</html>

Answer 4

正如@kobi在评论中提到的，您需要做的只是在您的line-height上设置div。没有桌子。

jsFiddle example of vertically centered image

如何将div中的img垂直居中？

4 个答案: