facebook фото/изображение вертикальное выравнивание?

Как Facebook вертикально выравнивает свои фотографии? Я проверил их тег img и его родителя. Родитель не использует отступы, а img не использует поля. Существует вертикальное выравнивание, но я не думаю, что оно применимо в данном случае (см. Изображение не вертикальное выравнивание :средний). Обычно я выравниваю по вертикали с помощью полей (а иногда и с помощью javascript), поэтому мне интересно, как facebook делает это без отступов или полей. Кто-нибудь знает, как они это делают?


javascript facebook vertical-alignment html css
person Derek    schedule 11.04.2012    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Проведя небольшое исследование на сайте 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.

И еще одна вещь: высота и высота строки родителя должны быть равны и должны быть больше, чем высота содержащегося в нем изображения.

person Vimal V Nair    schedule 12.04.2012
comment
У меня есть ссылка в вопросе, которая объясняет, почему. Короче говоря, вертикальное выравнивание работает только в таблицах. Во-вторых, я в основном сказал все, что вы сделали в моем вопросе. В-третьих, ваш ответ не помогает решить вопрос, по сути, вы задаете в ответе другой вопрос. Судя по вашему профилю, вы новичок на этом сайте, но в будущем, пожалуйста, не отвечайте вопросом на вопрос, вы только проголосуете. Наконец, не могли бы вы удалить этот ответ, поскольку на самом деле он не один, и если вы хотите, чтобы на ваш вопрос был дан ответ, напишите свой собственный вопрос. - person Derek; 13.04.2012
comment
на самом деле у меня был тот же вопрос, поэтому я подумал, что лучше задать его здесь. Поскольку я был новичком на этом сайте, я не знал, что он попадет под ответы. В любом случае, у меня тот же вопрос, в надежде получить некоторые ответы. И я не здесь, чтобы получить голоса. - person Vimal V Nair; 13.04.2012
comment
@ Дерек, я отредактировал ответ, и ваш предыдущий комментарий заставил меня найти ответ на ваш и мой вопрос. - person Vimal V Nair; 13.04.2012

arrow_upward
0
arrow_downward

ПРОВЕРЕННЫЙ КОД с использованием дисплея: таблица-ячейка

  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>
person Shawn E Carter    schedule 12.04.2012
comment
Я не понимаю, ваше изображение не находится вертикально в середине div-обертки. Кроме того, я не хочу использовать таблицу или ячейки таблицы, вертикальное выравнивание работает в таблицах, но я предпочитаю элементы div. - person Derek; 13.04.2012
comment
@Derek - если div, содержащий изображение, выше, то изображение будет выравниваться по вертикали посередине, в противном случае оно будет иметь максимальную высоту при 100% высоты контейнера, высота div которого составляет минимум 100%. :-) проверено. - person Shawn E Carter; 13.04.2012
comment
Я отредактировал тестовую страницу с кодом, который я использовал, имейте в виду! DOCTYPE необходим. - person Shawn E Carter; 13.04.2012
comment
Ваша демонстрация работает, но я не уверен, что ваша логика верна. Причина, по которой img выравнивается по вертикали, заключается в том, что div имеет display: table-cell, а не потому, что он больше, чем содержащееся изображение. Это работает, потому что вертикальное выравнивание работает с таблицами и ячейками таблицы, а display:table-cell превращает div в ячейку таблицы. Спасибо за ответ. - person Derek; 16.04.2012
comment
Проблема с этим подходом заключается в том, что если вы установите ширину и высоту div на 100%, ширина и высота div будут установлены на комбинированную ширину и высоту содержимого. Мне не нравится терять эту функциональность при использовании table-cell. - person Derek; 16.04.2012
comment
мне это тоже не нравится, использование одной таблицы позволит избежать всего этого, мне пришлось поместить мою вторую таблицу примерно в 71 000 строк кода, лол. - person Shawn E Carter; 16.04.2012