脸书照片/图像垂直对齐

facebook photo/ image vertical align?

本文关键字：垂直 对齐 图像 照片      更新时间：2023-09-26

Facebook如何垂直对齐其照片？ 我检查了他们的 img 标签及其父标签。 父级不使用填充，img 不使用边距。 有垂直对齐，但我认为它不适用于这种情况（请参阅图像不是垂直对齐：中间）。 我通常使用边距垂直对齐（有时使用javascript），所以我对Facebook如何在没有填充或边距的情况下做到这一点感兴趣。 有谁知道他们是怎么做到的？

在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.

还有一件事，父级的高度和行高应该相等，并且应该大于它包含的图像的高度

使用显示测试代码：表格单元格

  1. *请参阅 http://www.w3schools.com/cssref/pr_class_display.asp*
  2. 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>
相关文章：