0

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

4

2 回答 2

0

使用显示的测试代码：table-cell

  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>
于 2012-04-12T17:40:36.713 回答
0

在 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-12T17:20:34.820 回答