Wie Sie ein Bild in der Mitte mit Javascript?

Mir verzeihen, ich bin noch neu in Javascript/HTML/PHP. In meinem HTML-code, ich habe einen Verweis auf eine JavaScript-Funktion in einer Datei DisplayImage.js:

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

Wobei ein Abschnitt des DisplayImage.js JavaScript-code ist:

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");

Diese JS-Funktion zeigt nur, was Bild ich will, gehen in, dass es auf meine Seite. Mein problem ist, es wird immer Links ausgerichtet. Ich möchte das Bild ausgerichtet werden, in den Mittelpunkt. Ich versucht, indem align="center" in die div-Tags in meinem HTML-code, aber das funktioniert nicht, also ich gehe davon aus, dass Sie das tun müssen, von der JS-Funktion.

Kann mir jemand helfen, damit das Bild zentriert hier?

  • Gib es einfach ein margin: 0 auto;
  • Warum bist du nicht einfach mit einem img - element in der HTML mit entsprechenden Attributen?
  • Ich habe nicht alle der Skript-Datei... es gibt einige andere Logik macht die Anzeige von der .js erforderlich
  • Ich denke, dass ich nur ersetzt meine ursprüngliche JavaScript-Funktion mit einem Dokument.write() mit dem normalen img-tag. Ich hoffe, dass dies angemessen ist, ich denke, es löst das gleiche problem
InformationsquelleAutor AlbatrossCafe | 2013-02-25
  1. 1

    Als die andere erwähnt haben, verwenden Sie "margin: 0 auto;" auf dem img-tag.
    Allerdings muss das Bild auf "display: block;"

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

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

    • +1 für eine skriptlosen Lösung. 🙂
    • Warum +1? Zum Beispiel, ich Suche nach Lösung mit JavaScript
    InformationsquelleAutor slamborne
  2. 3

    Hinzufügen der Zeile img.style.margin = "0 auto"; sollte den trick tun.

    InformationsquelleAutor Elliot Bonneville
  3. 1

    Können Sie ändern Ihre div mit einer CSS-style-Tags.

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

    Wenn du mehr ändern als ein Beispiel, ändern Sie Ihre CSS (eingebettete oder externe Datei)

    InformationsquelleAutor Jay M
Schreibe einen Kommentar