<select class="options" name="align" id="align">
  <option value="start">Start</option>
  <option value="center">Center</option>
  <option value="end">End</option>
</select>

<div class="gallery">
  <div class="img">1</div>
  <div class="img">2</div>
  <div class="img">3</div>
  <div class="img">4</div>
  <div class="img">5</div>
  <div class="img">6</div>
  <div class="img">7</div>
  <div class="img">8</div>
  <div class="img">9</div>
  <div class="img">10</div>
</div>

body {
  min-height: 100vh;
  background: linear-gradient(to bottom right, #444, #222);
  font-family: arial;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.options {margin-bottom: 1em;}

.gallery {
  width: 70vw;
  margin: 0 auto;
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 1em;
  background: whitesmoke;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.3);
  
  .img {
    display: flex;
    color: white;
    font-size: 4em;
    scroll-snap-align: start;
    align-items: center;
    justify-content: center;
    flex: 0 0 320px;
    height: 200px;
    background: rgb(100, 100, 255);
    margin-right: 1rem;
  }
}

document.querySelector('select').addEventListener('change', e => {
  let alignment = e.target.value;
  Array.from(document.querySelectorAll('.img')).forEach(img => img.style.scrollSnapAlign = alignment);
});