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.
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:
- The initial image is not centered, its put all the way to the left.
- 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.