1

次の HTML コードがあります。

    <div id="inner">
    <div id="wrap">
      <img src="images/thumb/3.jpeg"/> 
      </div>
 </div>

そして、次のスタイルがそれに適用されます。

body{

    background:url(pattern/pattern1.png);
}
#inner{
    margin:0 auto;
    position:relative;
    height:400px;
    width:400px;
    background:#669;
    text-align:center;
}

#wrap{

    width:50%;

    margin:0 auto;

}

問題は、画像が常に内側の div の上部中央にあることですが、ラップの中央に配置したい

!------------------------------------------------- ------------------------- それでも同じ問題があり、jsfiddle のコードは次のとおりです: http://jsfiddle.net/RNhvz/

4

3 に答える 3

0

画像要素にマージンを直接適用する必要があります：JSFiddle example1

于 2012-05-10T15:06:26.880 に答える
0

あなたmargin: 0 autoはあなたの問題の一部です。

画像の高さを知っていますか？400px未満だと思います。スタイルの を 400 と画像の高さの差の半分に変更0します。margin

たとえば、画像の高さが 200px の場合、marginスタイルを次のように変更します。

margin: 100px auto

(400 - 200) / 2 = 100

于 2012-05-10T14:49:34.337 に答える
0

#inner の高さが常に 400px になる場合は、次のコードを使用してください。

#inner{
    /* Your code: */
    margin:0 auto;
    position:relative;
    height:400px;
    width:400px;
    background:#669;
    text-align:center;

    /* Solution part I. */
    line-height: 400px;
}

/* Solution part II. */
img {
    margin: 0 auto;
    vertical-align: middle; 
}

そうすれば、画像は垂直方向と水平方向の両方で中央に配置されます。さらに重要なのは、このソリューションでは画像サイズを知る必要がないということです。#wrap div は必要ありません。HTML 構文を維持できますが、この要素の幅とマージンのルールは必要ありません。

作業コードは次のとおりです: http://tinkerbin.com/YOjVvnVZ .

于 2012-05-10T16:36:04.073 に答える