Question

facebook如何垂直对齐照片？我检查了他们的img标签及其父母。父级不使用填充，img不使用边距。有纵向对齐，但我不认为它适用于这种情况（见Image not vertical-align:middle）。我通常使用边距（有时使用javascript）垂直对齐，所以我对facebook没有填充或边距的方式感兴趣。有谁知道他们是怎么做到的？

Answer 1

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

还有一件事，父母的身高和行高应该相等，它应该大于它所包含的图像的高度

Answer 2

TESTED CODE使用display：table-cell

*请参阅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>

facebook照片/图像垂直对齐？

2 个答案: