facebook photo/ image vertical align?

问题

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?

回答1:

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

回答2:

TESTED CODE using display: table-cell

*refer to http://www.w3schools.com/cssref/pr_class_display.asp*
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>

来源：https://stackoverflow.com/questions/10115252/facebook-photo-image-vertical-align

标签

javascript

html

css

facebook

vertical-alignment