Centrer l'image horizontalement dans un div

C'est probablement une question stupide, mais comme les méthodes habituelles d'alignement central d'une image ne fonctionnent pas, j'ai pensé que je demanderais. Comment puis-je centrer (horizontalement) une image à l'intérieur de sa div conteneur?

Voici le HTML et le CSS. J'ai également inclus le CSS pour les autres éléments de la vignette. Il s'exécute dans l'ordre décroissant, donc l'élément le plus élevé est le conteneur de tout et le plus bas est à l'intérieur de tout.

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

D'accord, j'ai ajouté le balisage sans PHP dans donc devrait être plus facile à voir. Aucune des deux solutions ne semble fonctionner dans la pratique. Le texte en haut et en bas ne peut pas être centré et l'image doit être centrée dans sa division conteneur. Le conteneur a un débordement caché, donc je veux voir le centre de l'image car c'est normalement là que se trouve la mise au point.

Le CSS Guy suggère ce qui suit:

Donc, traduire, peut-être:

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

Voici ma solution dans: http://jsfiddle.net/marvo/3k3CC/2/

CSS flexbox peut le faire avec justify-content: centerl'élément parent de l'image. Pour conserver le rapport hauteur / largeur de l'image, ajoutez- align-self: flex-start;y.

HTML

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

CSS

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

Production:

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>

Je viens de trouver cette solution ci-dessous sur la page CSS W3 et elle a répondu à mon problème.

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

Source: http://www.w3.org/Style/Examples/007/center.fr.html

Cela le ferait aussi

#imagewrapper {
    text-align:center
}

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

La meilleure chose que j'ai trouvée (qui semble fonctionner dans tous les navigateurs) pour centrer une image, ou n'importe quel élément, horizontalement est de créer une classe CSS et d'inclure les paramètres suivants:

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 */
}

Vous pouvez ensuite appliquer la classe CSS que vous avez créée à votre balise comme suit:

HTML

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

Vous pouvez également intégrer le CSS dans vos éléments en procédant comme suit:

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

... mais je ne recommanderais pas d'écrire CSS en ligne car vous devez alors effectuer plusieurs modifications dans toutes vos balises en utilisant votre code CSS de centrage si vous souhaitez changer le style.

C'est ce que j'ai fini par faire:

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

Ce qui limitera la hauteur de l'image à 600 pixels et centrera horizontalement (ou redimensionnera si la largeur du parent est plus petite) sur le conteneur parent, en conservant les proportions.

Je vais sortir sur un membre et dire que ce qui suit est ce que vous recherchez.

Remarque, je crois que ce qui suit a été accidentellement omis dans la question (voir commentaire):

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

Vous avez donc besoin de:

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

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

Pour centrer une image horizontalement, cela fonctionne:

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

Ajoutez ceci à votre CSS:

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

Il suffit de référencer un élément enfant qui, dans ce cas, est l'image.

Mettez un remplissage égal en pixels pour la gauche et la droite:

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

Mettez l'image à l'intérieur a newDiv. Rendre la largeur du contenant dividentique à l'image. Appliquer margin: 0 auto;au newDiv. Cela devrait centrer l' divintérieur du conteneur.

Utilisez le positionnement. Ce qui suit a fonctionné pour moi ... (Centré horizontalement et verticalement)

Avec zoom au centre de l'image (l'image remplit la 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;
}

Sans zoom au centre de l'image (l'image ne remplit pas la 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;
    }

vous pouvez aligner votre contenu en utilisant une boîte flexible avec un code minimum

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>

lien js fiddle https://jsfiddle.net/7un6ku2m/

Centrer une image dans un 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>

J'ai essayé plusieurs façons. Mais cette façon fonctionne parfaitement pour moi

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

Une manière réactive de centrer une image peut être comme ceci:

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

Si vous devez le faire en ligne (comme lors de l'utilisation d'une boîte de saisie),
voici un hack rapide qui a fonctionné pour moi: entourez votre (lien d'image dans ce cas)
dans un divavecstyle="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;
}

oui, le code comme celui-ci fonctionne bien

<div>
 <img>
</div>

mais juste pour te rappeler le style de l'image

object-fit : *depend on u*

de sorte que le code final ressemble à l'exemple

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

L'utilisation de la propriété flex sur le conteneur est la bonne réponse pour pouvoir centrer verticalement ET horizontalement.

La meilleure réponse ici ne fonctionne PAS pour centrer un élément verticalement, juste horizontalement.

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