Home/ Questions/Q 7780305
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-01T18:51:12+00:00

How does facebook vertically align its photos? I inspected their img tag and its

  • 0

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?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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