0

アバター作成サイトを作ろうとしているのですが、画像がセンタリングされません。私は自分の本のすべてを試しました。誰が私が間違っているのか考えていますか?

<img src="avatar/body_blue.png" class="body" id="body0"/>
<img src="avatar/body_green.png" class="body" id="body1"/>
<img src="avatar/body_grey.png" class="body" id="body2"/>
<img src="avatar/body_orange.png" class="body" id="body3"/>
<img src="avatar/body_purple.png" class="body" id="body4"/>

そして、これがこのCSSです：

.body {
    z-index:7;
    position:absolute;
    width:575px;
    height:750;
    margin:0px auto;
    text-align: center;
}

ここでライブを見ることができます。

4

5 に答える 5

0

次のように DIV #avatar のスタイルを設定しました。

#avatar {
position: relative;
width: 300px;
height: 350px;

これがページの中央に配置する DIV である場合は、スタイルを次のように変更します。

#avatar {
margin: 0 auto;
width: 300px;
height: 350px;
于 2012-12-17T14:36:00.320 に答える
0

これに対する解決策は、すでに中央に配置されている<img>内にタグを配置することです。<div>このようにして、<img>タグを絶対に配置したままにして、画像が互いに重なり合うようにすることができます。

「絶対位置要素は、静的以外の位置を持つ最初の親要素を基準にして配置されます。」- W3Schools . つまり、絶対配置<img>タグはコンテナに対して相対的に配置されます<div>。

更新された HTML:

<div class = "container">    
    <img src="avatar/body_blue.png" class="body" id="body0"/>
    <img src="avatar/body_green.png" class="body" id="body1"/>
    <img src="avatar/body_grey.png" class="body" id="body2"/>
    <img src="avatar/body_orange.png" class="body" id="body3"/>
    <img src="avatar/body_purple.png" class="body" id="body4"/>
</div>

この CSS クラスを追加します。

.container{margin: 0px auto; width: 575px;}
于 2012-12-17T13:23:57.593 に答える
0

わかりました、CSS を確認したところ、次の変更がありました。

  1. から幅を削除します#avatar
  2. position:absolute;から削除.body

これはあなたが持っている大きなフワフワした動物を中心にします。

于 2012-12-17T14:11:58.437 に答える
0

使用してみることができます

 .body {
 margin:0 auto;
 display:table;

}

于 2012-12-17T13:18:09.497 に答える
0

CSS について少し読むことをお勧めします。これは、何かをセンタリングする良い例です。

http://www.w3.org/Style/Examples/007/center.en.html

于 2012-12-17T13:19:28.500 に答える