0

画像を適切な場所に配置する必要があるとしましょうが、その中心がその場所にある必要があります。画像を div の左上隅に配置したかったので、画像を div に配置し、div に対する位置: 相対位置: 絶対値を画像に設定し、その上と左の値を 0 に設定しました。かなりうまくいきましたが、その画像の中心が左上隅の真上にある必要があります。top: -xpx、left: -ypx を手動で設定しますが、画像サイズの特定の値はありません (大きく異なる可能性があります)。次のような言い方はありますか: position: absolute-but-i'm-talking-about-the-center; 上: 0px; 左: 0px;?

どうもありがとうございます！

マッテオ

4

4 に答える 4

1

画像のサイズを取得し、必要な css left 値を設定するために JavaScript を使用できます。

ただし、画像は非同期であるため、ドキュメントの準備ができたときに必ずしも使用できるとは限らないため、画像の読み込み方法に注意してください。これは、画像を正しく処理しないと、幅と高さの寸法が 0 になってしまうことを意味します。

于 2012-12-24T14:14:15.640 に答える
0

画像を別のブロック要素でラップし、画像に負の左位置を配置する必要があります。

このようなもの：

<div id="something">
  <div class="imagewrap">
    <img>
  </div>
</div>

次に、＃somethingに相対位置、.imagewrap絶対位置などを指定します。また、。imgを使用して相対位置を指定する必要がありleft:-50%ます。トップも同じです。

于 2012-12-24T14:20:51.787 に答える
0

やってみました;

name_of_div_with_image {
display: block;
margin-left: auto;
margin-right: auto }

試してみてください。

于 2012-12-24T14:13:44.060 に答える
0

Javascript を使用する必要はありません。これは CSS で行うことができます。

必要な HTML: (明らかに div を img に変更する必要があります)

<div id="container">
  <div id="imgwrapper">
    <div id="img">Change this div-tag to an img-tag</div>
  </div>
</div>

必要な CSS:

#container
{
  position: absolute;
  left: 200px;
  top: 100px;
  height: auto;
  overflow: visible;
  border: 2px dashed green;
}
#imgwrapper
{
  position: relative;
  margin-left: -50%;
  margin-top: -50%;
  padding-top: 25%;
  border: 2px dashed blue;
}
#img
{
  display: block;
  width: 200px;
  height: 100px;
  border: 2px solid red;
}

jsFiddle リンクについては、ここをクリックしてください

margin-left: 50%;コンテナーの幅はコンテンツの幅とまったく同じになるため、コンテナー div を使用する場合は明らかに機能します。（追加する必要があるかもしれませんwidth: auto;）しかしmargin-top: -50%;、コンテナdivの高さがそれに合わせて変化するため、機能しません。したがって、これを使用するさらに別のラッパーdivがmargin-top: -50%;必要です。次に、正のパーセンテージを使用してこのエラーを修正する必要がありますベースのパディング。明らかに、これを修正する他の解決策があるかもしれませんが、解決策は次のようなものでなければなりません。

于 2013-01-14T11:58:20.750 に答える