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?

Community
  • 1
  • 1
Derek
  • 11,980
  • 26
  • 103
  • 162

2 Answers2

0

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

Vimal V Nair
  • 16
  • 4
  • I have a link in the question that explains why. In short, vertical align only works in tables. Second, I basically said everything you did in my question. Third, your "answer" does not help solve the question, in fact, you ask another question in the "answer". Judging from your profile, you're new to this site, but in the future please don't answer the question with a question, you'd only get down voted. Finally, could you please delete this "answer" as it is really not one and if you'd like your question to be answered, please post your own question. – Derek Apr 13 '12 at 02:22
  • actually i had the same question,so i thought it would be better ask it here.as i was new to this site i didnt know it would come under answers.Anyway i have the same question,hoping to get some answers.And i am not here to get votes. – Vimal V Nair Apr 13 '12 at 09:00
  • @Derek i have edited the answer and your previous comment made me to find the answer for your and my question. – Vimal V Nair Apr 13 '12 at 11:00
0

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>
ShawnDaGeek
  • 4,145
  • 1
  • 22
  • 39
  • 1
    I don't understand, your image is not vertically in the middle of the wrapper div. Also, I don't want to use a table or table cells, vertical aligns do work in tables, but I prefer divs. – Derek Apr 13 '12 at 02:18
  • @Derek - if the div containing the image is taller then the image will vertically align in middle, else it will max height at 100% of container, the div to which is min 100% tall. :-) it is tested. – ShawnDaGeek Apr 13 '12 at 14:04
  • I edited in a test page, with the code i used, keep in mind !DOCTYPE is needed . – ShawnDaGeek Apr 13 '12 at 14:39
  • 1
    Your demo works, but I'm not sure if your logic is correct. The reason why the img vertically aligns is because the div has display:table-cell, not because it is bigger than the contained image. It works because vertical-align works with tables and table cells and display:table-cell turned the div into a table cell. Thanks for the answer. – Derek Apr 16 '12 at 09:57
  • 1
    The problem with this approach is that if you set div width and height to 100%, the width and height of the div is set to the contents combined width and height. To lose this functionality when using table-cell isn't something I like. – Derek Apr 16 '12 at 10:02
  • i do not like it either, using a single table will avoid all that, i had to put my 2nd table in about 71,000 lines of code lol. – ShawnDaGeek Apr 16 '12 at 14:20