0

Facebookはどのように写真を垂直に配置しますか？私は彼らのimgタグとその親を調べました。親はパディングを使用せず、imgはマージンを使用しません。vertical-alignがありますが、この場合は当てはまらないと思います（vertical-align：middleではなく画像を参照）。私は通常、マージンを使用して（場合によってはjavascriptを使用して）垂直方向に整列するので、Facebookがパディングやマージンなしでそれを行う方法に興味があります。誰かがそれをどのように行うか知っていますか？

4

2 に答える 2

0

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.

また、親の高さと行の高さは等しく、含まれている画像の高さよりも大きくする必要があります。

于 2012-04-12T17:20:34.820 に答える
0

display：table-cellを使用してテストされたコード

  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>
于 2012-04-12T17:40:36.713 に答える