0

<img>を含むものの中央に配置するにはどうすればよい<div>ですか？

通常margin-left: auto; margin-right: auto;は機能していません。

max-width画像はコンテナより大きくすることができ、とによって水平または垂直に拡大縮小されますmax-height。

以下のコードを持つjsfiddle：http: //jsfiddle.net/9ShGj/1/

HTML：

<div class="container">
   <img src="http://www.yensa.com/fat/fat-dude10.jpg" />
</div>
<div class="container">
   <img src="http://oi43.tinypic.com/bje2wn.jpg" />
</div>

CSS：

.container {
 width: 200px;
 height: 200px;
 background: rgb(120, 120, 120);
 border: 1px solid red;
 margin: 5px;
}

.container img {
 max-width: 200px;
 max-height: 200px;
 margin-left: auto;
 margin-right: auto;
 vertical-align: middle;
}
4

4 に答える 4

5

あなたはこのように書くことができます：

CSS

div{
    width:200px;
    height:200px;
    border:1px solid red;
    text-align:center;
    line-height:200px;
}

img{
    vertical-align:middle;
}

HTML

<div>
    <img src="http://dummyimage.com/150x150/000/fff&text=dummy" >
</div>

これをチェックしてくださいhttp://jsfiddle.net/dP89y/

于 2012-12-07T06:09:58.080 に答える
1

画像はブロックレベルの要素ではないため、ブロックレベルの要素に変換する必要があります

だからあなたのCSSに追加

.container img {
 display:block                /*ADD this line*/
 max-width: 200px;
 max-height: 200px;
 margin-left: auto;
 margin-right: auto;
 vertical-align: middle;
}

また、以下の点を考慮する必要があります

Doctype : check whether it is not in quirks mode.

Width of inner div or image must me less that width of parent div.

あなたがあなたの答えを得るこれらのことをチェックしてください...すべて最高です。

于 2012-12-07T06:11:44.037 に答える
0

imgをブロックレベルの要素にしない限り、次のように中央に配置できるはずです。

.container { text-align: center; }
于 2012-12-07T06:11:22.233 に答える
0

次のCSSを更新します...vertical-align:middle; text-align:center

   .container {
        width: 200px;
        height: 200px;
        background: rgb(120, 120, 120);
        border: 1px solid red;
        margin: 5px;
        vertical-align:middle; text-align:center //add this
    }
于 2012-12-07T06:14:07.807 に答える