Facebook的照片/图像垂直对齐？

Facebook如何垂直对齐其照片？我检查了他们的img标签和它的父母。父级不使用填充，img不使用边距。有垂直对齐，但我不认为它适用于这种情况（请参阅Image not vertical-align:middle）。我通常垂直对齐使用边距（有时与JavaScript），所以我感兴趣的是如何Facebook没有填充或边距。有谁知道他们是如何做到的？Facebook的照片/图像垂直对齐？

来源

2012-04-11 Derek

在Facebook的网站上做了一些研究之后，我找到了答案，这里是代码

<!DOCTYPE html> 
<html> 
<head> 
<style type="text/css"> 
     .img_contain { 

      height: 700px; 
      text-align: center; 
      line-height: 700px; 
      border: #333333 1px solid; 
     } 
     .img_contain img { 
      display: inline-block; 
      vertical-align: middle; 
     } 

    </style> 
</head> 
<body> 
    <div class="img_contain"> 
     <img src="images/image.jpg" /> 
    </div> 
</body> 
    </html> 


Only thing i was missing is adding <!DOCTYPE html> at the top of the document.Now its working.

还有一件事家长的高度和行高应该是平等的，它应该是更大比图像的高度它包含

来源

2012-04-12 17:20:34

我在这可以解释为什么这个问题的链接。简而言之，垂直对齐仅适用于表格。其次，我基本上说过你在我的问题中所做的一切。第三，你的“答案”没有帮助解决问题，实际上，你在“答案”中提出另一个问题。从你的个人资料来看，你是这个网站的新手，但在未来请不要回答这个问题，你只会被拒绝投票。最后，请你删除这个“答案”，因为它确实不是一个，如果你希望你的问题得到解答，请发表你自己的问题。 – Derek 2012-04-13 02:22:57

其实我有同样的问题，所以我认为这将是更好的问它here.as我是这个网站的新手，我不知道它会在answers.Anyway我有同样的问题，希望得到一些答案。我不在这里得票。 – 2012-04-13 09:00:04

@Derek我编辑了答案，你以前的评论让我找到你和我的问题的答案。 – 2012-04-13 11:00:09

测试的代码使用显示：表小区

*指http://www.w3schools.com/cssref/pr_class_display.asp *
测试页在http://anotherfeed.com/stack/css/valign.php

<!DOCTYPE html> 
<html> 
<head> 

<title>StackOverflow on Another Feed</title> 

<meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> 
</head> 
<body> 
<div style="height: 500px; min-height: 500px; width: 500px; border: 1px solid; display: table-cell; vertical-align: middle; text-align: center"> 
<img src="http://anotherfeed.com/facebook_icon.png" style="display: inline-block; margin-left: auto; margin-right: auto;" /> 
</div> 
</body> 
</html>

来源

2012-04-12 17:40:36

我不明白，你的图像不是在包装div的中间垂直。此外，我不想使用表格或表格单元格，垂直对齐在表格中工作，但我更喜欢div。 – Derek 2012-04-13 02:18:12

@Derek - 如果包含图像的div更高，那么图像将在中间垂直对齐，否则它将在容器100％的最大高度，最小100％高的div。 :-)它被测试。 – 2012-04-13 14:04:23

我在测试页面中编辑了代码，请记住！DOCTYPE是必需的。 – 2012-04-13 14:39:27

Facebook的照片/图像垂直对齐？

回答

相关问题