Centrer l’alignement de l’image dans le div horizontalement

C’est probablement une question stupide mais comme les moyens habituels d’aligner une image ne fonctionnent pas, je pensais que je demanderais. Comment puis-je aligner (horizontalement) l’image à l’intérieur de son div conteneur?

Voici le HTML:

   

Heres the css, j’ai aussi 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-color: #DADADA; border-style: solid; border-width: thin; font-size: 15px } #thumbnailwrapper:hover { box-shadow: 0 0 5px 5px #DDDDDD } #artiststhumbnail { width: 120px; height: 108px; overflow: hidden; border-color: #DADADA; border-style: solid; border-width: thin; background-color: white; } #artiststhumbnail:hover { left: 50px } #genre { font-size: 12px; font-weight: bold; color: #2A2A2A } 

Bon, j’ai ajouté le balisage sans PHP, donc ça 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 div div. Le conteneur a un débordement caché, donc je veux voir le centre de l’image comme c’est normalement le centre de l’image.

Le CSS Guy suggère ce qui suit:

Donc, traduire, peut-être:

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

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

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

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

HTML

 

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

Cela aussi le ferait

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

C’est ce que j’ai fini de faire:

 
Error

Ce qui limite la hauteur de l’image à 600 pixels et se centre horizontalement (ou redimensionne si la largeur parente est plus petite) vers le conteneur parent, en conservant les proportions.

Je vais aller de l’avant et dire que ce qui suit est ce que vous êtes après.

Notez que ce qui suit a été accidentellement omis dans la question (voir commentaire):

 
...

Donc, vous avez besoin de:

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

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

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 parameters 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 tag comme suit:

HTML

  

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

  

… mais je ne recommanderais pas l’écriture de CSS en ligne, car vous devrez alors apporter plusieurs modifications à tous vos tags en utilisant votre code CSS de centrage si vous souhaitez changer le style.

pour centrer une image horizontalement cela fonctionne

 

Mettez un pixel égal à gauche et à droite:

 

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.

Placez l’image dans un newDiv . Faites en sorte que la largeur du div contenant soit la même que celle de l’image. Appliquer la margin: 0 auto; au newDiv . Cela devrait centrer le div dans le conteneur.

Utilisez le positionnement. Les éléments suivants ont fonctionné pour moi … (horizontalement et verticalement centré)

Avec zoom vers le 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 remplit pas 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; } 

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

HTML

 

CSS

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

Si vous devez le faire en ligne (par exemple lorsque vous utilisez une zone de saisie),
voici un hack rapide qui a fonctionné pour moi: entourez votre (lien image dans ce cas)
dans un div avec style="text-align:center"

 
Google Logo. Click to visit Google.com
This text will also be centered
/* ends centering style */

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

Using transform

Not By Design

Using flexbox margin

Not By Design

Using flexbox justify align

Not By Design
         
 ##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; }