Вероятно, это глупый вопрос, но поскольку обычные способы выравнивания изображения по центру не работают, я подумал, что задам этот вопрос. Как я могу выровнять по центру (по горизонтали) изображение внутри его контейнера div?

Вот HTML и CSS. Я также включил CSS для других элементов миниатюры. Он работает в порядке убывания, поэтому самый высокий элемент - это контейнер всего, а самый низкий - внутри всего.

#thumbnailwrapper {
      color: #2A2A2A;
      margin-right: 5px;
      border-radius: 0.2em;
      margin-bottom: 5px;
      background-color: #E9F7FE;
      padding: 5px;
      border: thin solid #DADADA;
      font-size: 15px
}
    
#artiststhumbnail {
      width: 120px;
      height: 108px;
      overflow: hidden;
      border: thin solid #DADADA;
      background-color: white;
}
    
#artiststhumbnail:hover {
      left: 50px
}

<!--link here-->

<a href="NotByDesign">
  <div id="thumbnailwrapper">

    <a href="NotByDesign">

      <!--name here-->
      <b>Not By Design</b>
      <br>

      <div id="artiststhumbnail">

        <a href="NotByDesign">

          <!--image here-->
          <img src="../files/noprofile.jpg" height="100%" alt="Not By Design" border="1" />
        </a>
      </div>

      <div id="genre">Punk</div>

  </div>

Хорошо, я добавил разметку без PHP, поэтому ее будет легче увидеть. Кажется, ни одно из решений не работает на практике. Текст вверху и внизу не может быть центрирован, а изображение должно быть центрировано внутри его контейнера div. Переполнение контейнера скрыто, поэтому я хочу видеть центр изображения таким, каким он обычно является в фокусе.