facebook photo/ image vertical align?

2019-06-14 14:19发布

站内问答 / JavaScript
890 2 4

How does facebook vertically align its photos? I inspected their img tag and its parent. The parent doesn't use padding and the img doesn't use margins. There is vertical-align, but I don't think it applies in this case(see Image not vertical-align:middle). I normally vertically align using margins (and sometimes with javascript) so I'm interested in how facebook does it without padding or margins. Does anyone know how they do it?

2条回答
做个烂人
2楼-- · 2019-06-14 15:10

After doing some research in facebook's website i found the answer,here is the code

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

And one more thing the height and line-height of the parent should be equal and it should be greater than height of the image it contains

查看更多
0人赞 添加讨论(0) 举报
劳资没心，怎么记你
3楼-- · 2019-06-14 15:16

TESTED CODE using display: table-cell

  1. *refer to http://www.w3schools.com/cssref/pr_class_display.asp*
  2. test page at 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>
查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)