html - 300px x 300px divの画像を中央に配置するには? (画像のサイズは不明)

Question

ブラウザーの左上隅から 300px x 300px に絶対配置された div があります。divに画像を表示する予定ですが、残念ながら画像のサイズはわかりませんが、画像が300px x 300px以下になることはわかっています。

同じサイズ以下の画像を水平方向と垂直方向の中央に配置する、幅と高さが 300px に設定された div を作成するにはどうすればよいですか?

score 7 · Accepted Answer

#container { width: 300px; height: 300px; line-height: 300px; text-align: center; }
#container img { vertical-align: middle; display: inline-block; }

jsFiddle デモ

score 6 · Accepted Answer

div で次の CSS を使用します。

CSS

div {
    width: 300px;
    height: 300px;
    position: absolute;
    top: 0;
    left: 0;
    background: #fff center center no-repeat;
}

HTML/PHP

<div style="background-image: url('<?php echo $image_url; ?>');"></div>

2 に答える 2