Bild horizontal innerhalb eines Div zentrieren

Dies ist wahrscheinlich eine dumme Frage, aber da die üblichen Methoden zum Ausrichten eines Bilds in der Mitte nicht funktionieren, dachte ich, ich würde sie stellen. Wie kann ich ein Bild in seinem Container-Div zentrieren (horizontal)?

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

#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 leichter 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 Container div zentriert sein. Der Container hat einen versteckten Überlauf, daher möchte ich die Bildmitte sehen, da dort normalerweise der Fokus liegt.

Der CSS-Typ schlägt Folgendes vor:

Also vielleicht übersetzen:

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

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

CSS Flexbox kann dies justify-content: centerfür das übergeordnete Bildelement tun . Fügen Sie es hinzu, um das Seitenverhältnis des Bildes beizubehalten align-self: flex-start;.

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>

Ich habe diese Lösung unten auf der W3-CSS-Seite gefunden und sie hat mein Problem beantwortet.

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

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

Dies würde es auch tun

#imagewrapper {
    text-align:center
}

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

Das Beste, was ich gefunden habe (was in allen Browsern zu funktionieren scheint), um ein Bild oder ein Element horizontal zu zentrieren, ist, eine CSS-Klasse zu erstellen und die folgenden Parameter einzuschließen:

CSS

.center {
    position: relative;          /* where the next element will be automatically positioned */
    display: inline-block;       /* causes element width to shrink to fit content */
    left: 50%;                   /* moves left side of image/element to center of parent element */
    transform: translate(-50%);  /* centers image/element on "left: 50%" position */
}

Anschließend können Sie die von Ihnen erstellte CSS-Klasse wie folgt auf Ihr Tag anwenden:

HTML

<img class="center" src="image.jpg" />

Sie können das CSS auch in Ihre Elemente einbinden, indem Sie folgende Schritte ausführen:

<img style="position: relative; display: inline-block; left: 50%; transform: translate(-50%);" src ="image.jpg" />

... aber ich würde nicht empfehlen, CSS inline zu schreiben, da Sie dann mehrere Änderungen an all Ihren Tags mithilfe Ihres zentrierenden CSS-Codes vornehmen müssen, wenn Sie jemals den Stil ändern möchten.

Das habe ich letztendlich getan:

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

Dadurch wird die Bildhöhe auf 600 Pixel begrenzt und der übergeordnete Container horizontal zentriert (oder verkleinert, wenn die übergeordnete Breite kleiner ist), wobei die Proportionen beibehalten werden.

Ich werde auf ein Glied gehen und sagen, dass das Folgende das ist, wonach Sie suchen.

Beachten Sie, dass meines Erachtens in der Frage versehentlich Folgendes weggelassen wurde (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/

Um ein Bild horizontal zu zentrieren, funktioniert dies wie folgt:

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

Fügen Sie dies Ihrem CSS hinzu:

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

Nur auf ein untergeordnetes Element verweisen, das in diesem Fall das Bild ist.

Setzen Sie eine gleiche Pixelauffüllung für links und rechts:

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

Legen Sie das Bild in ein newDiv. Stellen Sie sicher, dass die Breite des Inhalts divdem Bild entspricht. Bewerben Sie sich margin: 0 auto;auf die newDiv. Das sollte das divInnere des Containers zentrieren.

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

Mit Zoom in die Bildmitte (Bild füllt das Div):

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 ist nicht füllen Sie 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;
    }

Sie können Ihren Inhalt mithilfe der Flexbox mit minimalem Code ausrichten

HTML

<div class="image-container">
<img src="https://image.freepik.com/free-vector/modern-abstract-background_1048-1003.jpg" width="100px"> 
</div>

CSS

.image-container{
  width:100%;
  background:green;
  display:flex;

.image-container{
  width:100%;
  background:green;
  display:flex;
  justify-content: center;
  align-items:center;
}

<div class="image-container">
<img src="https://image.freepik.com/free-vector/modern-abstract-background_1048-1003.jpg" width="100px"> 
</div>

js Geigenlink https://jsfiddle.net/7un6ku2m/

Zentrieren Sie ein Bild 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>

Ich habe ein paar 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;" />

Eine reaktionsschnelle Möglichkeit, ein Bild zu zentrieren, kann folgendermaßen aussehen:

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

Wenn Sie dies inline tun müssen (z. B. bei Verwendung eines Eingabefelds), ist
hier ein kurzer Hack, der für mich funktioniert hat: Umgeben Sie Ihren (in diesem Fall Bildlink)
in einem divmitstyle="text-align:center"

<div style="text-align:center">

<a title="Example Image: Google Logo" href="https://www.google.com/" 
target="_blank" rel="noopener"><img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" alt="Google Logo. Click to visit Google.com" border="0" data-recalc-dims="1" /></a>

<h6><strong>This text will also be centered </strong></h6>

</div> /* ends centering style */

##Both Vertically and Horizontally center of the Page
.box{
    width: 300px;
    height: 300px;
    background-color: #232532;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

Ja, der Code wie dieser funktioniert gut

<div>
 <img>
</div>

aber nur um dich daran zu erinnern, den Stil für das Bild

object-fit : *depend on u*

Der endgültige Code ist also wie Beispiel

<div style="border: 1px solid red;">
    <img
      src="./assets/images/truck-toy.jpg"
      alt=""
      srcset=""
      style="
       border-radius: 50%;
       height: 7.5rem;
       width: 7.5rem;
       object-fit: contain;"
    />
</div>

Die Verwendung der Flex-Eigenschaft für den Container ist die richtige Antwort, um sowohl vertikal als auch horizontal zentrieren zu können.

Die oberste Antwort hier funktioniert NICHT zum vertikalen, sondern nur horizontalen Zentrieren eines Elements.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">


      <style>
      body{
  /*-------------------important for fluid images---\/--*/
  overflow-x: hidden; /* some browsers shows it for mysterious reasons to me*/
  overflow-y: scroll;
  margin-left:0px;
  margin-top:0px;
  /*-------------------important for fluid images---/\--*/
      }
      .thirddiv{
      float:left;
      width:100vw;
      height:100vh;
      margin:0px;
      background:olive;
      }
      .thirdclassclassone{
      float:left;   /*important*/
      background:grey;
      width:80vw;
      height:80vh; /*match with img height bellow*/
      margin-left:10vw; /* 100vw minus "width"/2    */
      margin-right:10vw; /* 100vw minus "width"/2   */
      margin-top:10vh;
      }
      .thirdclassclassone img{
      position:relative; /*important*/
     display: block;  /*important*/
    margin-left: auto;  /*very important*/
    margin-right: auto;  /*very important*/
    height:80vh; /*match with parent div above*/

    /*--------------------------------
    margin-top:5vh;
    margin-bottom:5vh;
    ---------------------------------*/
    /*---------------------set margins to match total  height of parent di----------------------------------------*/
      }
    </style>           
</head>  
<body>
    <div class="thirddiv">
       <div class="thirdclassclassone">
       <img src="ireland.png">
    </div>      
</body>
</html>