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

Legen Sie das Bild in ein newDiv . Machen Sie die Breite des enthaltenen div das gleiche wie das Bild. anwenden margin: 0 auto; zum newDiv . Das sollte das Zentrum der div innerhalb des Containers.

Answer 2

Positionierung verwenden. Folgendes hat bei mir funktioniert... (Horizontal und vertikal zentriert)

Mit Zoom auf die Mitte des Bildes (das Bild füllt das Div aus):

div{
    display:block;
    overflow:hidden;
    width: 70px; 
    height: 70px;  
    position: relative;
}
div img{
    min-width: 70px; 
    min-height: 70px;
    max-width: 250%; 
    max-height: 250%;    
    top: -50%;
    left: -50%;
    bottom: -50%;
    right: -50%;
    position: absolute;
}

Ohne Zoom auf die Mitte des Bildes (Bild hat pas füllen das Div):

   div{
        display:block;
        overflow:hidden;
        width: 100px; 
        height: 100px;  
        position: relative;
    }
    div img{
        width: 70px; 
        height: 70px; 
        top: 50%;
        left: 50%;
        bottom: 50%;
        right: 50%;
        position: absolute;
    }

Answer 3

Eine reaktionsschnelle Art, ein Bild zu zentrieren, kann folgendermaßen aussehen:

.center {
    display: block;
    margin: auto;
    max-width: 100%;
    max-height: 100%;
}

Answer 4

Zentrieren eines Bildes in einem div

/* standar */
div, .flexbox-div {
  position: relative;
  width: 100%;
  height: 100px;
  margin: 10px;
  background-color: grey;  
}

img {
  border: 3px solid red;
  width: 75px;
  height: 75px;
}
/* || standar */

/* transform */
.transform {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%); /* IE 9 */
  -webkit-transform: translate(-50%, -50%); /* Chrome, Safari, Opera */ 
}
/* || transform */

/* flexbox margin */
.flexbox-div {
  display: -webkit-flex;
  display: flex;
  background-color: lightgrey; 
}

.margin-img {
  margin: auto;
}
/* || flexbox margin */

/* flexbox justify align */
.flexbox-justify {
  justify-content: center;
}

.align-item {
  align-self: center;
}
/* || flexbox justify align */

<h4>Using transform </h4>  
<div>
  <img class="transform" src="http://placeholders.org/250/000/fff" alt="Not By Design" border="1" />
</div>

<h4>Using flexbox margin</h4>  
<div class="flexbox-div">
  <img class="margin-img" src="http://placeholders.org/250/000/fff" alt="Not By Design" border="1" />
</div>

<h4>Using flexbox justify align</h4>  
<div class="flexbox-div flexbox-justify">
  <img class="align-item" src="http://placeholders.org/250/000/fff" alt="Not By Design" border="1" />
</div>

Answer 5

Ich habe einige Möglichkeiten ausprobiert. Aber dieser Weg funktioniert perfekt für mich

<img src="~/images/btn.png" class="img-responsive" id="hide" style="display: block; margin-left: auto; margin-right: auto;" />