0

幅500pxの画像があります。divの中にあります。div の幅は 250px です。画像を div の中央に揃えるにはどうすればよいですか? 負のマージンを使用する必要がありますtopか?left

4

4 に答える 4

3

負のマージンを使用します: #myDiv img { margin: 0 -125px; }. DIVこれは、との両方の幅がわかっている場合にのみ機能しIMGます。

于 2012-08-19T20:19:34.040 に答える
0

これを試してみてください（ie-6についてはわかりませんが、ie-7以降では問題なく動作します）

<style>
.test{ height:250px; width:250px; overflow:hidden; position:relative;}
.test img{ position:absolute; top:50%; left:50%; margin-left:-250px; margin-top:-250px; height:500px; width:500px;}
</style>

<body>
<div class="test"><img src="img.png" alt="img" /></div>
</body>

その画像を背景として使用できる場合は、これを試すことができます

.test{height:250px; width:250px; background:url(img-path.png) no-repeat 50% 50%;}
于 2012-08-20T12:10:01.280 に答える
0

画像の周りの html で何かを変更 (または少なくとも追加) できますか? これは一種の古いトリックで、画像の周りに余分なものを追加する必要があるという点で少し厄介ですが、<div>それで問題がなければ非常にうまく機能します (注: 効果を簡単に見えるようにするためにいくつかの境界線を追加しました)テスト中):

<div style="width:250px; border: solid 2px red;">
    <!-- Place the following div at 50%: -->
    <div style="width: 500px; margin-left:50%; border: solid 2px blue;">
        <!-- ...then move the image back by half of it's own width: -->
        <img style="width:500px; margin-left:-250px; border: solid 3px green;" />
    </div>
</div>
于 2012-08-19T21:04:39.440 に答える
0

デモ

ねえdisplay table-cell、このようなプロパティに慣れました

<div class="parent">
<img src="http://www.gravatar.com/avatar/3c6597370b476903ed475f70b4b3ce31?s=32&d=identicon&r=PG">
</div>

CSS

.parent{
border:solid 1px red;
  display:table-cell;
  width:300px;
  height:300px;
  vertical-align:middle;
  text-align:center;
}
.parent img{
vertical-align:top;
}

デモ

于 2012-08-20T07:11:49.993 に答える