Jest to prawdopodobnie głupie pytanie, ale ponieważ zwykłe sposoby centrowania obrazu nie działają, pomyślałem, że zapytam. Jak mogę wyśrodkować wyrównanie (poziomo) obrazu wewnątrz jego div pojemnika?

Oto HTML i CSS. Zawarłem także CSS dla innych elementów miniatury. Działa w kolejności malejącej, więc najwyższy element jest pojemnikiem wszystkiego, a najniższy jest wewnątrz wszystkiego.

#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>

Dobra, dodałem znaczniki bez PHP, więc powinno być łatwiej je zobaczyć. Żadne z rozwiązań nie działa w praktyce. Tekst u góry iu dołu nie może być wyśrodkowany, a obraz powinien być wyśrodkowany w obrębie jego segmentu div. Kontener ma ukryty przepełnienie, więc chcę zobaczyć środek obrazu, ponieważ zwykle znajduje się on w centrum uwagi.