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

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

Hier ist meine Lösung: http://jsfiddle.net/marvo/3k3CC/2/

Answer 2

CSS flexbox kann es mit justify-content: center auf das übergeordnete Element des Bildes. Um das Seitenverhältnis des Bildes zu erhalten, fügen Sie align-self: flex-start; dazu.

HTML

<div class="image-container">
  <img src="http://placehold.it/100x100" />
</div>

CSS

.image-container {
  display: flex;
  justify-content: center;
}

Ausgabe:

body {
  background: lightgray;
}
.image-container {
  width: 200px;
  display: flex;
  justify-content: center;
  margin: 10px;
  padding: 10px;
  /* Material design properties */
  background: #fff;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}
.image-2 {
  width: 500px;
  align-self: flex-start;  /* to preserve image aspect ratio */
}
.image-3 {
  width: 300px;
  align-self: flex-start;  /* to preserve image aspect ratio */
}

<div class="image-container">
  <img src="http://placehold.it/100x100" />
</div>

<div class="image-container image-2">
  <img src="http://placehold.it/100x100/333" />
</div>

<div class="image-container image-3">
  <img src="http://placehold.it/100x100/666" />
</div>

Answer 3

Ich habe gerade diese Lösung unten auf der W3 CSS Seite gefunden und sie hat mein Problem gelöst.

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

Quelle: http://www.w3.org/Style/Examples/007/center.en.html

Answer 4

Dies würde auch genügen

#imagewrapper {
    text-align:center;
}

#imagewrapper img {
    display:inline-block;
    margin:0 5px;
}

Answer 5

Das habe ich dann auch gemacht:

<div style="height: 600px">
   <img src="assets/zzzzz.png" alt="Error" style="max-width: 100%; 
        max-height: 100%; display:block; margin:auto;" />
</div>

Die Höhe des Bildes wird auf 600px begrenzt und es wird horizontal zentriert (oder verkleinert, wenn die übergeordnete Breite kleiner ist), um den übergeordneten Container, unter Beibehaltung der Proportionen.