web-dev-qa-db-fra.com

Centrer l'image à l'aide du centre d'alignement de texte?

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

img {
    text-align: center;
}
htmlcss
469
Web_Designer

Cela ne fonctionnera pas car la propriété text-align s'applique aux conteneurs de blocs, pas aux éléments en ligne, et img est un élément en ligne. Voir les spécifications du W3C .

Utilisez ceci à la place:

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

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

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

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)

80
Shai Reznik - HiRez.io

Une autre façon de faire serait de centrer un paragraphe suivant:

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

Tu peux faire:

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

14
Dimitris Maniatis

En réalité, le seul problème avec votre code est que l'attribut text-align s'applique au texte (oui, les images sont considérées comme du texte) à l'intérieur de la balise. Vous voudriez mettre une balise span autour de l'image et définir its style à text-align: center, comme 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, il s'agit du moyen le plus simple et le plus sûr de centrer des images, à condition de ne pas oublier d'appliquer la règle aux images contenant span (ou div). 

12
Code Monkey

Seulement si vous avez besoin de supporter les anciens navigateurs IE.

L'approche moderne consiste à faire margin: 0 auto dans 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 est que la largeur du paragraphe doit être identique à 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ûr text-align:center.

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

8
Ray Toal

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;
}
        <div class="parent">
    <img src="https://placehold.it/60/60" />
</div>

  2. en utilisant la propriété margin

    img {
    display: block;
    margin: 0 auto;
}
    <img src="https://placehold.it/60/60" />

  3. en utilisant la propriété position

    img {
    display: block;
    position: relative;
    left: -50%;
}
.parent {
    position: absolute;
    left: 50%;
}
    <div class="parent">
    <img src="https://placehold.it/60/60" />
</div>

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 image parente, l'image ne reste 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>

8
Amin Fazlali

si vous utilisez une classe avec image, les opérations suivantes feront

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

s'il ne s'agit que d'une image dans un cals spécifique que vous souhaitez aligner au centre, procédez comme suit.

class img {
    display: block;
    margin: 0 auto;
}
6
Baig
img{
    display: block;
    margin-right: auto;
    margin-left: auto;      
 }
6
Dream Hunter

il suffit de changer le parent aligner :)

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

3
Mo.

vous pouvez utiliser text-align: center sur le parent et remplacer img par 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
}
3
Doml The-Bread

Vous pouvez utiliser css3 flex box pour centrer parfaitement l’image à l’intérieur, à la fois verticalement et horizontalement . Supposons que vous avez comme support d’image: 

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

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

3
Santoni

Pour centrer une image non background, cela dépend si vous souhaitez afficher l'image en tant qu'élément en ligne (comportement par défaut) ou en tant qu'é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 sur lequel vous devez définir text-align: center;.

Cas du bloc

Si vous souhaitez considérer l'image comme un élément de bloc qui lui est propre, la propriété text-align 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é est-elle text-align: center; 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, au cas où vous auriez d’autres éléments à l’intérieur du wrapper de l’image, car tous les éléments enfants qui sont des frères et soeurs de l’image hériteront de la propriété text-align: vous pourriez ne pas aimer cet effet secondaire.

Références

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

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

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

J'utiliserais un div pour centrer une image. Un péché:

<div align="center"><img src="your_image_source"/></div>
2
Akintunde-Rotimi

Une autre façon de redimensionner - affichez-le:

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 */
}
1
Kishore Banala

utilisez ceci pour votre img css

img{
  margin-right: auto;
  margin-left: auto;
}
1
treb
<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 voie pour l'image du centre dans le cadre de laravel.

0
teran teshara

Parfois, nous ajoutons directement le contenu et les images sur admin wordpress dans les pages. Lorsque nous insérons les images à côté du contenu et que nous souhaitons 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 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.

0
Sangrai

display: block avec margin: 0 n'a pas fonctionné pour moi, ni emballer 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

0
OverCoder

La solution la plus simple que j'ai trouvée consistait à ajouter ceci à mon img-element:

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

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

0
Panu Logic

J'ai découvert que si j'ai une image et du texte dans une div, je peux alors utiliser text-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

0
MadPhysicist