How do I center images in a Java Script random image generator?

user_18157739 0
Viewed 57

I am making a random image generator for a school assignment, how do I center the image? I am new to java script and would like to know how to center the images made by the generator. I have tried a few different ways of centering the code but haven't found any way of doing it. If there are workarounds to get it centered that is alright as I just need to have it centered. Here is the code;

    <html>  
<head>  
<title>Display random images</title>  
<style>  
body {  
margin-top: 30px;  
}  
</style>   
</head>  

<script>  
function displayRandomImages()   
{  
    
   //array of images with image location, height, and width  
   var imageArray = [  
   {   
     //address URL of the image  
     src: "https://i.insider.com/5d8a4d172e22af08c029c929?width=750&format=jpeg&auto=webp",  
     //size for the image to be display on webpage  
     width: "650",  
     height: "500", 
   },   
   {  
     src: "https://static.stacker.com/s3fs-public/styles/slide_desktop/s3/editedWWIIMonopolySPYSCAPE2000xpngv1587097885.PNG",  
     width: "650",  
     height: "500",
     
   },   
   {  
     src: "https://images-na.ssl-images-amazon.com/images/I/71IbpNx-3oL._SL1000_.jpg",  
     width: "650",  
     height: "500", 
   },  
   {  
     src: "https://cdn.vox-cdn.com/thumbor/wj2qaxojsQT3DrUbP78SVW1fpMs=/0x0:1500x1500/1200x800/filters:focal(630x630:870x870)/cdn.vox-cdn.com/uploads/chorus_image/image/65772083/81C985A22GL._SL1500_.0.jpg",  
     width: "650",  
     height: "500", 
    } ];  
      
    //find the length of the array of images  
    var arrayLength = imageArray.length;  
    var newArray = [];  
    for (var i = 0; i < arrayLength; i++) {  
        newArray[i] = new Image();  
        newArray[i].src = imageArray[i].src;  
        newArray[i].width = imageArray[i].width;  
        newArray[i].height = imageArray[i].height;
    }  
     
  // create random image number  
  function getRandomNum(min, max)   
  {  
      // generate and return a random number for the image to be displayed   
      imgNo = Math.floor(Math.random() * (max - min + 1)) + min;  
      return newArray[imgNo];  
  }    
  
  // 0 is first image and (preBuffer.length - 1) is last image of the array  
  var newImage = getRandomNum(0, newArray.length - 1);  
   
  // remove the previous images  
  var images = document.getElementsByTagName('img');  
  var l = images.length;  
  for (var p = 0; p < l; p++) {  
     images[0].parentNode.removeChild(images[0]);  
  }  
  // display the new random image    
  document.body.appendChild(newImage);  
}  

</script>  
  
<body>  
<div>  
<center>  
<h2 style="color:green"> Random Image Generator </h2>  
<h4> Press the button to display and change the image </h4>  
<button onclick="displayRandomImages();"> Display Images </button>  
</center> 


</div>  
</body>  
</html>
css html javascript
4 Answers
<html>  
<head>  
<title>Display random images</title>  
<style>  
body {  
margin-top: 30px;  
}  
img{
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
}
</style>   
</head>  

<script>  
function displayRandomImages()   
{  
    
   //array of images with image location, height, and width  
   var imageArray = [  
   {   
     //address URL of the image  
     src: "https://i.insider.com/5d8a4d172e22af08c029c929?width=750&format=jpeg&auto=webp",  
     //size for the image to be display on webpage  
     width: "650",  
     height: "500", 
   },   
   {  
     src: "https://static.stacker.com/s3fs-public/styles/slide_desktop/s3/editedWWIIMonopolySPYSCAPE2000xpngv1587097885.PNG",  
     width: "650",  
     height: "500",
     
   },   
   {  
     src: "https://images-na.ssl-images-amazon.com/images/I/71IbpNx-3oL._SL1000_.jpg",  
     width: "650",  
     height: "500", 
   },  
   {  
     src: "https://cdn.vox-cdn.com/thumbor/wj2qaxojsQT3DrUbP78SVW1fpMs=/0x0:1500x1500/1200x800/filters:focal(630x630:870x870)/cdn.vox-cdn.com/uploads/chorus_image/image/65772083/81C985A22GL._SL1500_.0.jpg",  
     width: "650",  
     height: "500", 
    } ];  
      
    //find the length of the array of images  
    var arrayLength = imageArray.length;  
    var newArray = [];  
    for (var i = 0; i < arrayLength; i++) {  
        newArray[i] = new Image();  
        newArray[i].src = imageArray[i].src;  
        newArray[i].width = imageArray[i].width;  
        newArray[i].height = imageArray[i].height;
    }  
     
  // create random image number  
  function getRandomNum(min, max)   
  {  
      // generate and return a random number for the image to be displayed   
      imgNo = Math.floor(Math.random() * (max - min + 1)) + min;  
      return newArray[imgNo];  
  }    
  
  // 0 is first image and (preBuffer.length - 1) is last image of the array  
  var newImage = getRandomNum(0, newArray.length - 1);  
   
  // remove the previous images  
  var images = document.getElementsByTagName('img');  
  var l = images.length;  
  for (var p = 0; p < l; p++) {  
     images[0].parentNode.removeChild(images[0]);  
  }  
  // display the new random image    
  document.body.appendChild(newImage);  
}  

</script>  
  
<body>  
<div>  
<center>  
<h2 style="color:green"> Random Image Generator </h2>  
<h4> Press the button to display and change the image </h4>  
<button onclick="displayRandomImages();"> Display Images </button>  
</center> 


</div>  
</body>  
</html>
user_109709210

You could try adding a class of img-el to each image in the array and then add this to your script:

img-el{
  display: block;
  margin-left: auto;
  margin-right: auto;
}

another option is to add those properties to each and every image in the array and assign them in the same for loop where you assign the width, src etc.

I'm not sure exactly what you want it to look like, but I would also suggest reading up on flex.

user_68287760

Add a custom CSS to the image to render in the middle or add it into the center element by referring it to an Id.

//array of images with image location, height, and width   
const imageArray = [  
   {   
     //address URL of the image  
     src: "https://i.insider.com/5d8a4d172e22af08c029c929?width=750&format=jpeg&auto=webp",  
     //size for the image to be display on webpage  
     width: "450",  
     height: "300", 
   },   
   {  
     src: "https://static.stacker.com/s3fs-public/styles/slide_desktop/s3/editedWWIIMonopolySPYSCAPE2000xpngv1587097885.PNG",  
     width: "450",  
     height: "300",
     
   },   
   {  
     src: "https://images-na.ssl-images-amazon.com/images/I/71IbpNx-3oL._SL1000_.jpg",  
     width: "450",  
     height: "300", 
   },  
   {  
     src: "https://cdn.vox-cdn.com/thumbor/wj2qaxojsQT3DrUbP78SVW1fpMs=/0x0:1500x1500/1200x800/filters:focal(630x630:870x870)/cdn.vox-cdn.com/uploads/chorus_image/image/65772083/81C985A22GL._SL1500_.0.jpg",  
     width: "450",  
     height: "300", 
    } 
];  
var arrayLength = imageArray.length;  
var newArray = [];  
for (var i = 0; i < arrayLength; i++) {  
    newArray[i] = new Image();  
    newArray[i].src = imageArray[i].src;  
    newArray[i].width = imageArray[i].width;  
    newArray[i].height = imageArray[i].height;
    newArray[i].className = "center-image";
}  
  
// create random image number  
function getRandomNum(min, max) {  
    // generate and return a random number for the image to be displayed   
    imgNo = Math.floor(Math.random() * (max - min + 1)) + min;  
    return newArray[imgNo];  
}  
    
function displayRandomImages() {    
  // 0 is first image and (preBuffer.length - 1) is last image of the array  
  var newImage = getRandomNum(0, imageArray.length - 1); 
  // remove the previous images  
  var images = document.getElementsByTagName('img');  
  var l = images.length;  
  for (var p = 0; p < l; p++) {  
     images[0].parentNode.removeChild(images[0]);  
  }  
  // display the new random image    
  document.body.appendChild(newImage);  
}
body {
  margin-top: 30px;
}

.center-image {
  display: block;
  margin: 0 auto;
}
<div>  
  <center>  
    <h2 style="color:green"> Random Image Generator </h2>  
    <h4> Press the button to display and change the image </h4>  
    <button onclick="displayRandomImages();"> Display Images </button>  
  </center> 
</div>

user_18237400

You just need the center then that will be something like this:

<html>

<head>
  <title>Display random images</title>
  <style>
    body {
      margin-top: 30px;
    }

    img {
      display: block;
      margin: 50px auto;
    }
  </style>
</head>

<script>
  function displayRandomImages() {

    //array of images with image location, height, and width  
    var imageArray = [{
        //address URL of the image  
        src: "https://i.insider.com/5d8a4d172e22af08c029c929?width=750&format=jpeg&auto=webp",
        //size for the image to be display on webpage  
        width: "650",
        height: "500",
      },
      {
        src: "https://static.stacker.com/s3fs-public/styles/slide_desktop/s3/editedWWIIMonopolySPYSCAPE2000xpngv1587097885.PNG",
        width: "650",
        height: "500",

      },
      {
        src: "https://images-na.ssl-images-amazon.com/images/I/71IbpNx-3oL._SL1000_.jpg",
        width: "650",
        height: "500",
      },
      {
        src: "https://cdn.vox-cdn.com/thumbor/wj2qaxojsQT3DrUbP78SVW1fpMs=/0x0:1500x1500/1200x800/filters:focal(630x630:870x870)/cdn.vox-cdn.com/uploads/chorus_image/image/65772083/81C985A22GL._SL1500_.0.jpg",
        width: "650",
        height: "500",
      }
    ];

    //find the length of the array of images  
    var arrayLength = imageArray.length;
    var newArray = [];
    for (var i = 0; i < arrayLength; i++) {
      newArray[i] = new Image();
      newArray[i].src = imageArray[i].src;
      newArray[i].width = imageArray[i].width;
      newArray[i].height = imageArray[i].height;
    }

    // create random image number  
    function getRandomNum(min, max) {
      // generate and return a random number for the image to be displayed   
      imgNo = Math.floor(Math.random() * (max - min + 1)) + min;
      return newArray[imgNo];
    }

    // 0 is first image and (preBuffer.length - 1) is last image of the array  
    var newImage = getRandomNum(0, newArray.length - 1);

    // remove the previous images  
    var images = document.getElementsByTagName('img');
    var l = images.length;
    for (var p = 0; p < l; p++) {
      images[0].parentNode.removeChild(images[0]);
    }
    // display the new random image    
    document.body.appendChild(newImage);
  }
</script>

<body>
  <div>
    <center>
      <h2 style="color:green"> Random Image Generator </h2>
      <h4> Press the button to display and change the image </h4>
      <button onclick="displayRandomImages();"> Display Images </button>
    </center>


  </div>
</body>

</html>

I only updated your style blocks, with css for Image. That's all

user_109074470
Related