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

La propriété est-elle text-align: center;un bon moyen de centrer une image à l'aide de CSS?

img {
    text-align: center;
}

Cela ne fonctionnera pas car la text-alignpropriété s'applique aux conteneurs de blocs, pas aux éléments en ligne, et imgest un élément en ligne. Voir la spécification W3C .

Utilisez-le à la place:

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

<div style="border: 1px solid black;">
<img class="center" src ="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a">

</div>

Cela ne fonctionne pas toujours ... sinon, essayez:

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

Je suis tombé sur ce post , et cela a fonctionné pour moi:

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

<div style="border: 1px solid black; position:relative; min-height: 200px">
  <img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a">

</div>

(Alignement vertical et horizontal)

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

<p style="text-align:center; border:1px solid black"><img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a"></p>

Tu peux faire:

<center><img src="..." /></center>

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

span.centerImage {
     text-align: center;
}

<span class="centerImage"><img src="http://placehold.it/60/60" /></span>

L'image sera centrée. En réponse à votre question, c'est la manière la plus simple et la plus infaillible de centrer des images, tant que vous vous souvenez d'appliquer la règle au contenant de l'image span(ou div).

Il existe trois méthodes pour centrer un élément que je peux suggérer:

1. Utilisation de la text-alignpropriété

       .parent {
       text-align: center;
   }

       <div class="parent">
       <img src="https://placehold.it/60/60" />
   </div>

   Exécuter l'extrait de codeMasquer les résultats

   Développer l'extrait

2. Utilisation de la marginpropriété

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

   <img src="https://placehold.it/60/60" />

   Exécuter l'extrait de codeMasquer les résultats

   Développer l'extrait

3. Utilisation de la positionpropriété

   img {
       display: block;
       position: relative;
       left: -50%;
   }
   .parent {
       position: absolute;
       left: 50%;
   }

   <div class="parent">
       <img src="https://placehold.it/60/60" />
   </div>

   Exécuter l'extrait de codeMasquer les résultats

   Développer l'extrait

Les première et deuxième méthodes ne fonctionnent que si le parent est au moins aussi large que l'image. Lorsque l'image est plus large que son parent, l'image ne restera pas centrée !!!

Mais: La troisième méthode est un bon moyen pour cela!

Voici un exemple:

img {
    display: block;
    position: relative;
    left: -50%;
}
.parent {
    position: absolute;
    left: 50%;
}

<div class="parent">
    <img src="http://imgsv.imaging.nikon.com/lineup/lens/zoom/normalzoom/af-s_dx_18-140mmf_35-56g_ed_vr/img/sample/img_01.jpg" />
</div>

Uniquement si vous devez prendre en charge les anciennes versions d'Internet Explorer.

L'approche moderne consiste à faire margin: 0 autodans votre CSS.

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

HTML:

<p>Hello the following image is centered</p>
<p class="pic"><img src="https://twimg0-a.akamaihd.net/profile_images/440228301/StackoverflowLogo_reasonably_small.png"/></p>
<p>Did it work?</p>

CSS:

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

Le seul problème ici 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 supposera 100% et votre image sera alignée à gauche, sauf si vous utilisez bien sûrtext-align:center .

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

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

Si vous utilisez une classe avec une image, alors ce qui suit fera l'affaire

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

Si c'est seulement une image dans une classe spécifique que vous souhaitez aligner au centre, alors ce qui suit fera:

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

Sur le conteneur contenant l'image, vous pouvez utiliser une Flexbox CSS 3 pour centrer parfaitement l'image à l'intérieur, à la fois verticalement et horizontalement.

Supposons que vous avez <div class = "container"> comme support d'image:

Ensuite, en tant que CSS, vous devez utiliser:

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

Et cela rendra tout votre contenu à l'intérieur de cette div parfaitement centré.

La solution la plus simple que j'ai trouvée était d'ajouter ceci à mon élément img:

style="display:block;margin:auto;"

Il semble que je n'ai pas besoin d'ajouter "0" avant "auto" comme suggéré par d'autres. C'est peut-être la bonne façon, mais cela fonctionne assez bien pour moi sans le "0". Au moins sur les derniers Firefox, Chrome et Edge .

Changez simplement l'alignement des parents :)

Essayez celui-ci sur les propriétés parent:

text-align:center

Vous pouvez utiliser text-align: centersur le parent et changer le imgen 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
}

J'utiliserais un div pour aligner au centre une image. Un péché:

<div align="center"><img src="your_image_source"/></div>

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

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

Le centrage d'une image non d'arrière-plan dépend de l'affichage de l'image en ligne (comportement par défaut) ou en bloc.

Cas de inline

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

Cas de bloc

Si vous voulez considérer l'image comme un élément de bloc à part entière, alors la text-alignpropriété n'a 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; une bonne façon de centrer une image en utilisant CSS?

Oui et non.

• Oui, si l'image est le seul élément à l'intérieur de son enveloppe.
• Non, au cas où vous auriez d'autres éléments dans le wrapper de l'image parce que tous les éléments enfants qui sont frères et sœurs de l'image hériteront de la text-alignpropriété: et peut-être que vous n'aimeriez pas cet effet secondaire.

Références

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

Une autre façon de mettre à l'échelle - affichez-le:

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

Utilisez ceci pour votre imgCSS:

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

display: blockavec margin: 0n'a pas fonctionné pour moi, ni envelopper avec untext-align: center élément.

Voici ma solution:

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

translateX est pris en charge par la plupart des navigateurs

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

HTML:

    <div class="picture-group">
        <h2 class="picture-title">Picture #1</h2>
        <img src="http://lorempixel.com/99/100/" alt="" class="picture-img" />
        <p class="picture-caption">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus sapiente fuga, quia?</p>
    </div>

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 l'administrateur WordPress à l'intérieur des pages. Lorsque nous insérons les images à l'intérieur du contenu et que nous voulons aligner ce centre. Le code est affiché comme:

 **<p><img src="https://abcxyz.com/demo/wp-content/uploads/2018/04/1.jpg" alt=""></p>**

Dans ce cas, vous pouvez ajouter du contenu CSS comme ceci:

article p img{
    margin: 0 auto;
    display: block;
    text-align: center;
    float: none;
}

Utilisation:

<dev class="col-sm-8" style="text-align: center;"><img src="{{URL('image/car-trouble-with-clipping-path.jpg')}}" ></dev>

Je pense que c'est la façon de centrer une image dans le framework Laravel.

.img-container {
  display: flex;
}

img {
  margin: auto;
}

cela rendra le centre de l'image à la fois verticalement et horizontalement