Wie zentriert man ein Bild horizontal innerhalb eines div-Elements?

Question

Wie kann ich ein Bild innerhalb seines Container-Divs mittig (horizontal) ausrichten?

Hier ist das HTML und CSS. Ich habe auch das CSS für die anderen Elemente des Thumbnails beigefügt. Es läuft in absteigender Reihenfolge, so dass das höchste Element ist der Container von allem und das niedrigste ist innerhalb alles.

#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 eingefügt, damit es besser zu sehen ist. Beide Lösungen scheinen in der Praxis nicht zu funktionieren. Der Text oben und unten kann nicht zentriert werden und das Bild sollte in seinem Container-Div zentriert werden. Der Container hat Überlauf versteckt, so dass ich die Mitte des Bildes zu sehen, wie das ist normalerweise, wo der Fokus ist.

Answer 1

Ich lehne mich mal weit aus dem Fenster und behaupte, dass Sie das Folgende suchen.

Ich glaube, das Folgende wurde in der Frage versehentlich ausgelassen (siehe Kommentar):

<div id="thumbnailwrapper"> <!-- <<< This opening element -->
    <div id="artiststhumbnail">
...

Was Sie also brauchen, ist:

#artiststhumbnail {
    width:120px;
    height:108px;
    margin: 0 auto; /* <<< This line here. */
    ...
}

http://jsfiddle.net/userdude/XStjX/3/

Answer 2

Ja, der Code wie dieser funktioniert gut

<div>
 <img/>
</div>

aber nur zur Erinnerung, der Stil für das Bild

object-fit : *depend on u*

Der endgültige Code sieht dann wie folgt aus Beispiel

div {
  display: flex;
  justify-content: center;
  align-items: center;
}

div img {
  object-fit: contain;
}

<div style="border: 1px solid red;">
  <img src="https://img.joomcdn.net/9dd32cbfa0cdd7f48ca094972ca47727cd3cd82c_original.jpeg" alt="" srcset="" style="
       border-radius: 50%;
       height: 7.5rem;
       width: 7.5rem;
       object-fit: contain;" />
</div>

Answer 3

Fügen Sie dies zu Ihrem CSS hinzu:

#artiststhumbnail a img {
   display: block;
   margin-left: auto;
   margin-right: auto;
}

Es wird lediglich auf ein untergeordnetes Element verwiesen, das in diesem Fall das Bild ist.

Answer 4

Um ein Bild horizontal zu zentrieren, funktioniert dies:

<p style="text-align:center"><img src=""></p>

Answer 5

Fügen Sie für links und rechts einen gleichen Pixelabstand ein:

<div id="artiststhumbnail" style="padding-left:ypx;padding-right:ypx">