1

申し訳ありませんが、私はまだ Javascript/HTML/PHP に不慣れです。私の HTML コードでは、ファイル DisplayImage.js 内の JavaScript 関数への参照があります。

<body>
<div id="display_image" align="center">
    <script type="text/javascript" src="DisplayImage.js"></script>
</div>
</body>

DisplayImage.js JavaScript コードのセクションは次のとおりです。

function show_image(src, width, height, alt) {
    var img = document.createElement("img");
    img.src = src;
    img.width = width;
    img.height = height;
    img.alt = alt;
    document.body.appendChild(img);
}   

show_image("sample1.jpg", 900, 690, "sample image #1");

この JS 関数は、渡したい画像をページに表示するだけです。私の問題は、常に左揃えです。画像を中央に配置したいと思います。HTML コードの div タグに align="center" を入れてみましたが、うまくいきません。JS 関数からこれを行う必要があると思います。

ここで画像を中央揃えにするのを手伝ってくれる人はいますか?

4

4 に答える 4

3

行を追加するimg.style.margin = "0 auto";とうまくいくはずです。

于 2013-02-25T02:57:25.910 に答える
1

他の人が述べているように、「margin：0auto;」を使用します。imgタグに。ただし、画像は「display：block;」に設定する必要があります。

#display_image > img {
    display: block;
    margin: 0 auto;
}

http://jsfiddle.net/slamborne/yffwN/

于 2013-02-25T02:59:01.997 に答える
1

CSS スタイル タグを使用して div を変更できます。

<div id="display_image" style="display:block; margin:0 auto;">
    <script type="text/javascript" src="DisplayImage.js"></script>
</div>

これの複数のインスタンスを変更する場合は、CSS (埋め込みまたは外部ファイル) を変更します

于 2013-02-25T03:06:49.717 に答える
1 
<!DOCTYPE html>
<head>
 <style>
    img.center {
        position: absolute;
        top: 50%;
        bottom: 50%;
        left: 50%;
        right: 50%;
        margin: auto;
    }
</style>

<script>

function ex() {
  var x = document.createElement("IMG")
  x.setAttribute("class", "center")
  x.setAttribute("src", "example.png");
  x.setAttribute("width", "50");
  x.setAttribute("height", "50");
  x.setAttribute("alt", "example");
  document.body.appendChild(x);
}

</script>
</head>
<body>
<button onclick="ex()">click</button>
</body>
</html>
于 2020-03-09T21:10:02.137 に答える