Dies ist wahrscheinlich eine blöde Frage, aber da die üblichen Methoden zum Zentrieren eines Bildes nicht funktionieren, dachte ich, ich würde fragen. Wie kann ich ein Bild in seinem Container div zentrieren (horizontal ausrichten)?

Hier ist HTML und CSS. Ich habe auch das CSS für die anderen Elemente des Thumbnails eingefügt. Es wird in absteigender Reihenfolge ausgeführt, sodass das höchste Element der Container von allem ist und das niedrigste Element sich in allem befindet.

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

Okay, ich habe das Markup ohne PHP hinzugefügt, sollte also einfacher zu sehen sein. Keine der beiden Lösungen scheint in der Praxis zu funktionieren. Der Text oben und unten kann nicht zentriert werden, und das Bild sollte in seinem Containerdiv zentriert sein. Der Container hat einen versteckten Überlauf, daher möchte ich die Bildmitte sehen, da dort normalerweise der Fokus liegt.