How can I center my Slideshow on my html document?

Question

I sourced this code from a website. This is the code I used in the header as I was instructed.

var slideimages = new Array()
var slidelinks = new Array()

function slideshowimages() {
    for (i = 0; i < slideshowimages.arguments.length; i++) {
        slideimages[i] = new Image()
        slideimages[i].src = slideshowimages.arguments[i]
    }
}

function slideshowlinks() {
    for (i = 0; i < slideshowlinks.arguments.length; i++)
        slidelinks[i] = slideshowlinks.arguments[i]
}

function gotoshow() {
    if (!window.winslide || winslide.closed)
        winslide = window.open(slidelinks[whichlink])
    else
        winslide.location = slidelinks[whichlink]
    winslide.focus()
}

Then in my body tags the code was as follows

<a href="javascript:gotoshow()">
  <img src="food1.jpg" name="slide" border=0 width=1400 height=600>
</a>
<script>
  slideshowimages("file:///Users/Luke/Documents/Burton_borough1.jpg","file:///Users/Luke/Documents/defaultbackgroundimage.jpg")

  var slideshowspeed = 5000

  var whichlink = 0
  var whichimage = 0

  function slideit() {
    if (!document.images)
        return
    document.images.slide.src = slideimages[whichimage].src
    whichlink = whichimage
    if (whichimage < slideimages.length - 1)
        whichimage++
        else
            whichimage = 0
    setTimeout("slideit()", slideshowspeed)
  }
  slideit()   

</script>

How do I go about styling this so it goes to the center of my screen instead of the left which is what its doing.

possible duplicate of [Horizontally center a div in a div](http://stackoverflow.com/questions/114543/horizontally-center-a-div-in-a-div) — imtheman, Jun 23 '15 at 20:04
When you "source" code from some random website, without understanding it, it is often old, stale, and full of worst-practices. Like this code. — Stephen P, Jun 23 '15 at 23:04

score 2 · Answer 1 · answered Jun 23 '15 at 23:00

It would be more economical in this case to give your div a class and style that separately in your CSS.

<div class="slideshow">
 ...
</div>

and

.slideshow {
    margin:auto;
    width: 80%;
    text-align: center;"
}

in your CSS. Then you can reuse it.

It would also be very helpful if you could post working (or broken) examples of your code on jsfiddle or codepen or wherever instead of local files ...

score 0 · Accepted Answer · answered Jun 23 '15 at 20:06

wrap the script in a <div> and add the attributes margin-left:auto;margin-right:auto, like so...

<div style="margin-left:auto;margin-right:auto;width:80%">
    <a href="javascript:gotoshow()"><img src="food1.jpg" name="slide" border=0></a>

    <script>
        slideshowimages("file:///Users/Luke/Documents/Burton_borough1.jpg","file:///Users/Luke/Documents/defaultbackgroundimage.jpg")

        var slideshowspeed=5000

        var whichlink=0
        var whichimage=0

        function slideit(){
            if (!document.images)
            return
            document.images.slide.src=slideimages[whichimage].src
            whichlink=whichimage
            if (whichimage<slideimages.length-1)
            whichimage++
            else
            whichimage=0
            setTimeout("slideit()",slideshowspeed)
        }

        slideit()

        //-->
    </script>
</div>

Edit: formatted your code so its slightly more readable. please do this in the future

How can I center my Slideshow on my html document?

2 Answers2