1

我有一个<img>我想以<div>. 我在这里找到的所有以前的答案都使用了一些技巧或要求您知道图像的宽度，这在我的情况下有所不同。

在父对象上水平居中text-align: center很容易。我不知道如何垂直对齐。

jsFiddle 示例

仅供参考，Facebook 仅使用 HTML 和 CSS 就可以很好地做到这一点。所以请不要<table>或javascript hacks。看起来他们正在使用一些东西line-height来使他们的<img>垂直中心。

4

4 回答 4

3

请记住，vertical-align: middle;它本身没有用，您还需要设置 line-height: line-height:400px;。

<div>如果您的文本中没有其他文本（可能只有一行），这很有用。

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

于 2012-12-09T09:10:13.540 回答
-1

在您的 css 类中添加一条规则：

 {vertical-align:middle;}
于 2012-12-09T08:50:56.307 回答
-1 
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>
于 2012-12-09T08:51:46.237 回答
-1

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

垂直居中图像的 jsFiddle 示例

于 2012-12-09T09:08:52.340 回答