Centrer l’image en utilisant le centre d’alignement du texte?

Cela ne fonctionnera pas car la propriété text-align s’applique aux blocs de bloc, pas aux éléments en ligne, et img est un élément en ligne. Voir la spécification W3C .

Utilisez ceci à la place:

 img.center { display: block; margin: 0 auto; } 

Cela ne fonctionne pas toujours https://stackoverflow.com/questions/7055393/center-image-using-text-align-center/… si ce n’est pas le cas, essayez:

 img { display: block; margin: 0 auto; } 

Entré dans ce post et cela a fonctionné pour moi:

 img { position: absolute; top: 0; bottom:0; left: 0; right:0; margin: auto; } 

(Alignement vertical et horizontal)

Une autre façon de procéder serait de centrer un paragraphe englobant:

Tu peux faire:

En fait, le seul problème avec votre code est que l’atsortingbut text-align s’applique au texte (oui, les images comptent comme du texte) à l’intérieur de la balise. Vous souhaitez placer une balise span autour de l’image et définir son style pour text-align: center , comme suit:

 span.centerImage { text-align: center; } 

Seulement si vous devez prendre en charge d’anciens navigateurs IE.

L’approche moderne consiste à faire de la margin: 0 auto dans votre CSS.

Exemple ici: http://jsfiddle.net/bKRMY/

HTML:

 
Hello the following image is centered
 
 
Did it work? 

CSS:

 p.pic { width: 48px; margin: 0 auto; } 

Le seul problème est que la largeur du paragraphe doit être la même que la largeur de l’image . Si vous ne mettez pas de largeur sur le paragraphe, cela ne fonctionnera pas, car il prendra 100% et votre image sera alignée à gauche, sauf si vous utilisez text-align:center .

Essayez le violon et expérimentez-le si vous le souhaitez.

Il y a trois méthodes pour centrer un élément que je peux suggérer.

1. en utilisant la propriété text-align

     .parent { text-align: center; } 

si vous utilisez une classe avec l’image, alors ce qui suit fera l’affaire

 class{ display: block; margin: 0 auto; } 

s’il ne s’agit que d’une image dans un cals spécifique que vous souhaitez centrer, alors la suite fera l’affaire.

 class img { display: block; margin: 0 auto; } 

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

Changez simplement l’alignement du parent 🙂

Essayez celui-ci sur les propriétés parentes text-align:center

vous pouvez utiliser text-align: center sur le parent et changer l’img pour display: inline-block -> il se comporte donc comme un élément de texte et sera centré si le parent a une largeur!

 img { display: inline-block } 

Sur le conteneur contenant l’image Vous pouvez utiliser css3 flex box pour centrer parfaitement l’image à la fois verticalement et horizontalement. Supposons que vous ayez comme détenteur d’image: alors comme css Vous devez utiliser

 .container { display: flex; align-items: center; justify-content: center; height: 100%; } 

Et cela rendra tout votre contenu dans ce div parfaitement centré.

Je voudrais utiliser un div pour centrer une image. Un péché:

Si vous voulez définir l’image comme arrière-plan, j’ai une solution:

 .image{ background-image: url(yourimage.jpg); background-position: center; } 

Pour centrer une image non d’arrière-plan, vous devez afficher l’image en tant qu’élément intégré (comportement par défaut) ou élément de bloc.

Cas d’inline

Si vous souhaitez conserver le comportement par défaut de la propriété CSS d’affichage de l’image, vous devez envelopper votre image dans un autre élément de bloc auquel vous devez définir text-align: center;

Cas de bloc

Si vous voulez considérer l’image comme un élément de bloc, alors la propriété text-align ne fait pas de sens, et vous devriez le faire à la place:

 IMG.display { display: block; margin-left: auto; margin-right: auto; } 

La réponse à votre question:

La propriété text-align: center est-elle? un bon moyen de centrer une image en utilisant CSS?

Oui et non.

• Oui, si l’image est le seul élément à l’intérieur de son wrapper.
• Non, dans le cas où vous avez d’autres éléments dans le wrapper de l’image car tous les éléments enfants qui sont frères de l’image hériteront de la propriété text-align : et peut-être que vous n’aimeriez pas cet effet secondaire.

Les références

2. Liste des éléments en ligne
3. Centrer les choses

Une autre façon de mettre à l’échelle – affichez-la:

 img { width: 60%; /* or required size of image. */ margin-left: 20% /* or scale it to move image. */ margin-right: 20% /* doesn't matters much if using left and width */ } 

utilise ça pour ton img css

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

display: block with margin: 0 n’a pas fonctionné pour moi, ni enveloppé avec un élément text-align: center .

Ceci est ma solution:

 img.center { position: absolute; transform: translateX(-50%); left: 50%; } 

translateX est supporté par la plupart des navigateurs

J’ai découvert que si j’ai une image et du texte à l’intérieur d’un div , je peux utiliser text-align:center pour aligner le texte et l’image d’un seul coup.

HTML:

  
 
Picture #1
  
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus sapiente fuga, quia?
  

CSS:

 .picture-group { border: 1px solid black; width: 25%; float: left; height: 300px; #overflow:scroll; padding: 5px; text-align:center; } 

CodePen: https://codepen.io/artforlife/pen/MoBzrL?editors=1100

Parfois, nous ajoutons directement le contenu et les images sur wordpress admin à l’intérieur des pages. Lorsque nous insérons les images à côté du contenu et que vous souhaitez aligner ce centre. Le code est affiché comme:

  **
** 

dans ce cas, vous pouvez append css comme ceci:

article p img {marge: 0 auto; bloc de visualisation; text-align: center; float: none; }

J’espère que cela aidera dans cette situation.