Solution 1 :

How I understand, you should add alignments in your .quiz class

.quiz {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-grow: 1;
    margin: auto;
  }

then your items in this block will be aligned. And if you want to add space between images just add margin on them.

Problem :

So here is what I am trying to achieve. I want to have an image centered in the middle of the page, and when a button is clicked, a second image, horizontally aligned with the 1st, will appear next to it (with even spacing between them).

Right now I have the code to get them aligned next to each other working fine.

HTML:

div class="quiz">

    <div class="column">    
            <span id="img1label" class="word"></span>
            <img id="img1" class="imgs"/>
        </div>
            <div class="column">    
            <span id="img2label" class="word"></span>
            <img id="img2" alt="quiz image" class="imgs"/>
        </div>


   </div>

CSS:


.quiz {
    display: flex;
    flex-direction: row;
    flex-grow: 1;
    margin: auto;
  }

.column{
     display:flex;
     justify-content:center;
     flex-direction: column;
     flex-grow: 1;
  }

  .imgs{
      display:block;
      width:50%;
  }

.word{
      display:block;
      width: 100%;
      text-align:center;

  }

The JS at the moment isn’t really much worth showing, right now I have it so that img2 is a pure white image, on button click it just swaps images.

The problems with this:

  1. The initial image is not centered, its put all the way to the left.
  2. The insertion of a new image isn’t really an insertion, so nothing changes in layout to adjust the margins to center two new images.

I tried using the image grid tutorial here: https://www.w3schools.com/howto/howto_js_image_grid.asp
But I don’t want to resize my actual images. I just want them to move further apart when the number of images being displayed changes. I am not using JQuery right now, and I’d prefer to not have to learn how to use a whole new package for what seems to be a simple problem that I’m struggling with. Any help is appreciated.

By