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


Est la propriété text-align: center; un bon moyen de centrer une image en utilisant CSS?

img {
    text-align: center;
}

448
2017-08-14 06:21


origine


Réponses:


Cela ne fonctionnera pas comme text-align la propriété s'applique aux conteneurs de blocs, 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;
}

981
2017-08-14 06:25



Cela ne marche pas toujours ... si ce n'est pas le cas, essayez:

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

102
2017-08-14 06:24



Entré 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)


77
2018-05-22 14:28



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

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

43
2018-01-20 12:32



Tu peux faire:

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


14
2017-08-10 08:42



En fait, le seul problème avec votre code est que le text-align L'attribut s'applique au texte (oui, les images comptent comme du texte) à l'intérieur de la balise. Vous voudriez mettre un span tag autour de l'image et définir ses style à text-align: center, comme ceci:

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 le moyen le plus simple et le plus infaillible de centrer les images, aussi longtemps que vous vous souvenez d'appliquer la règle à l'image contenant span (ou div).


11
2017-10-18 00:40



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

L'approche moderne est de 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;
}

Seul problème, c'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ûr text-align:center.

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


8
2017-08-14 06:24



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

  1. en utilisant text-align propriété

        .parent {
        text-align: center;
    }
        <div class="parent">
        <img src="https://placehold.it/60/60" />
    </div>

  2. en utilisant margin propriété

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

  3. en utilisant position propriété

    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 seconde 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 reste pas centrée !!!

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

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>


7
2017-12-28 15:40