«Вставить» изображение горизонтально при нажатии кнопки

Question

Так вот что я пытаюсь достичь. Я хочу, чтобы изображение находилось по центру в середине страницы, и при нажатии кнопки рядом с ним появится второе изображение, выровненное по горизонтали с первым (с равным интервалом между ними). ​​

Прямо сейчас у меня есть код для их выравнивания рядом друг с другом, работающий нормально.

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;

  }

JS на данный момент особо не стоит показывать, сейчас у меня оно есть, так что img2 - чисто белое изображение, при нажатии кнопки оно просто меняет изображения.

Проблемы с этим:

1. Исходное изображение не отцентрировано, оно помещено полностью влево.
2. Вставка нового изображения на самом деле не является вставкой, поэтому в макете для настройки полей ничего не меняется для центрирования двух новых изображений.

Я попытался использовать учебное пособие по сетке изображений здесь: https://www.w3schools.com/howto/howto_js_image_grid.asp Но я не хочу изменять размеры моих реальных изображений. Я просто хочу, чтобы они раздвигались дальше при изменении количества отображаемых изображений. Я не использую JQuery прямо сейчас, и я бы предпочел не изучать, как использовать целый новый пакет для решения простой проблемы, с которой я борюсь. Любая помощь приветствуется.

Answer 1

Насколько я понимаю, вы должны добавить выравнивания в ваш .quiz класс

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

, тогда ваши элементы в этом блоке будут выровнены. А если вы хотите добавить пространство между изображениями, просто добавьте на них поля.