web-dev-qa-db-fra.com

Centrer l'image horizontalement dans un div

C'est probablement une question stupide, mais comme les méthodes habituelles d'alignement au centre d'une image ne fonctionnent pas, je pensais que je demanderais. Comment puis-je centrer (horizontalement) une image à l'intérieur de son conteneur?

Voici le HTML et CSS. J'ai également inclus le CSS pour les autres éléments de la vignette. Il fonctionne dans un ordre décroissant de sorte que 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 il devrait être plus facile à voir. Aucune solution 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 son conteneur div. Le conteneur a un débordement masqué. Par conséquent, je souhaite voir le centre de l'image comme c'est normalement le cas.

htmlcss
315
Jacob Windsor

Le CSS Guy suggère ce qui suit:

Alors, traduisant peut-être:

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

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

704
Marvo

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

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

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

60
mk.hd

CSS flexbox peut le faire avec justify-content: center sur l'élément parent de l'image.

HTML

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

CSS

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

Sortie:

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;
}
.image-3 {
  width: 300px;
}
<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>

52
Manoj Kumar

Cela aussi le ferait

#imagewrapper {
    text-align:center
}

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

La meilleure chose que j'ai trouvée (qui semble fonctionner dans tous les navigateurs) pour centrer une image ou tout é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 insérer le code CSS dans votre ou 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 l'écriture CSS en ligne, car vous devrez alors effectuer plusieurs modifications dans toutes vos balises à l'aide de votre code CSS de centrage si vous souhaitez modifier le style. 

12
Kevin

C'est ce que j'ai fini de 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 sera centré horizontalement (ou redimensionné si la largeur du parent est plus petite) sur le conteneur parent, en maintenant les proportions.

10
Cherno

Je vais sortir sur une branche et dire que ce qui suit est ce que vous recherchez. 

Notez que le texte suivant a été omis accidentellement dans la question (voir le commentaire):

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

Donc ce dont vous avez besoin c'est:

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

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

7
Jared Farrish

pour centrer une image horizontalement cela fonctionne 

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

Ajoutez ceci à votre CSS

#artiststhumbnail,img {
      margin-left:auto;
      margin-right:auto;
    }

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

3
Bishop

Mettez un remplissage égal pour les pixels gauche et droit:

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

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;" />
1
Ifwat Ibrahim

Placez la photo dans une newDiv. Faites en sorte que la largeur de la variable div soit identique à celle de l'image . Appliquez le margin: 0 auto; à la newDiv. Cela devrait centrer la div dans le conteneur.

1
Setu

vous pouvez aligner votre contenu en utilisant flex box 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/

1
Santosh Khalse

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>

1
antelove

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

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

Pour répondre simplement à la question, vous devez disposer d'un wrapper autour d'un sous-élément. 

L'encapsuleur indiquera au sous-élément des limites de fonctionner.

  • position : relative;
     relatif L'élément étant positionné par rapport à sa position normale, "left: 20px" ajoute 20 pixels à la position LEFT de l'élément
  • display : block ou inline-block;
     bloc Affiche un élément en tant qu'élément de bloc. Il commence sur une nouvelle ligne et occupe toute la largeur

     bloc en ligne Affiche un élément en tant que conteneur de bloc de niveau en ligne. L'élément lui-même est mis en forme en tant qu'élément en ligne, mais vous pouvez appliquer des valeurs de hauteur et de largeur
  • min-height ou min-width : (x) px;

Le sous-élément à l'intérieur doit se comporter conformément aux règles définies par le wrapper.

  • position : absolute;
     absolu L'élément est positionné par rapport à son premier élément ancêtre positionné (non statique)
  • display : block ou inline-block;
     bloc Affiche un élément en tant qu'élément de bloc. Il commence sur une nouvelle ligne et occupe toute la largeur

     bloc en ligne Affiche un élément en tant que conteneur de bloc de niveau en ligne. L'élément lui-même est mis en forme en tant qu'élément en ligne, mais vous pouvez appliquer des valeurs de hauteur et de largeur
  • min-height ou min-width : (x) px;
  • margin : auto;  auto Le navigateur calcule une marge
  • top : 0;   Définit la position du bord supérieur en px, cm, etc.
  • bas : 0;   Définit la position du bord inférieur en px, cm, etc.
  • gauche : 0;   Définit la position du bord gauche en px, cm, etc.
  • droite : 0;   Définit la position droite du bord en px, cm, etc.

L'instruction de haut, bas, gauche, droite dans position: absolue avec marge auto, prend la différence calculée de toutes les arêtes et le sous-élément se comporte dans son élément enveloppant. 

.Image-Container {
  position: relative;
  display: inline-block;
  width: 100%;
  height: 100%;
  min-height: 400px;
  background-image: -webkit-linear-gradient(left, #fd2853, #f55b17 20%, #fad500 40%, #3fe9d1 60%, #b93fe9);
  background-image: -moz-linear-gradient(left, #fd2853, #f55b17 20%, #fad500 40%, #3fe9d1 60%, #b93fe9);
  background-image: -o-linear-gradient(left, #fd2853, #f55b17 20%, #fad500 40% #3fe9d1 60%, #b93fe9);
  background-image: linear-gradient(to right, #fd2853, #f55b17 20%, #fad500 40%, #3fe9d1 60%, #b93fe9);
  border: 3px dashed #fff;
}

.Image-Container img {
  position: absolute;
  display: inline-block;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}
<div class='Image-Container'>
  <img src='http://www.freedigitalphotos.net/images/img/homepage/usa-travel-1-bottom-15226.jpg'>
</div>

0
Matthew Egan

Si vous devez le faire en ligne (comme lors de l'utilisation d'une zone de saisie),
voici un petit hack qui a fonctionné pour moi: entourez votre (lien de l'image dans ce cas)
dans une div avec style="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 */
0
SherylHohman