javascript - Comment centrer un élément img dans un div, comme le montre l'exemple ci-dessous

Question

Code HTML

<style>
    p {
        overflow: hidden ;
    }
    img {
        height: 100% ;
        width: auto ;
    }
</style>

<p>
    <img src='//foo.com/foo.jpg' />
</p>

Exemple d'image de l'effet souhaité

La zone rouge est p, la zone verte est img

En d'autres termes, l'image est plus large

La largeur de img n'est pas fixe, elle ne peut donc pas être résolue en corrigeant margin-left

• Demandé le 20 avril
• 2 Commentez
• Inviter à répondre
• modifier
• Plus
  • Rapport
  • Fermer

Soumettre un commentaire

× Les commentaires prennent en charge la syntaxe Markdown partielle : **bold**_italic_[link](http://example.com)> 引用`code`- Liste .
Dans le même temps, les utilisateurs que vous @ recevront également des notifications

Tri par défaut Tri temporel

13 réponses

La réponse est utile et a une valeur de référence 3 La réponse n'est pas utile. C'est une mauvaise réponse. Elle ne répond pas à la question.

Il existe un moyen, mais au lieu d'utiliser la balise img, ajoutez une image d'arrière-plan à p.

p {
    background-image: url(image-url);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

• Réponse le 20 avril
• Commentez
• Modifier

M. Xiang227 Réputation

Soumettre un commentaire

× Les commentaires prennent en charge la syntaxe Markdown partielle : **bold**_italic_[link](http://example.com)> 引用`code`- Liste .
Dans le même temps, les utilisateurs que vous @ recevront également des notifications

La réponse est utile et a une valeur de référence 1 La réponse n'est pas utile. C'est une mauvaise réponse. Elle ne répond pas à la question.

Positionnement de l'image marginleft :-(width/2) Quant à la largeur de img n'est pas fixe, elle peut être obtenue par js puis définir dynamiquement marginleft

• Réponse le 20 avril
• Commentez
• Modifier

Regardez le monde avec des yeux froids177 Réputation

Soumettre un commentaire

× Les commentaires prennent en charge la syntaxe Markdown partielle : **bold**_italic_[link](http://example.com)> 引用`code`- Liste .
Dans le même temps, les utilisateurs que vous @ recevront également des notifications

La réponse est utile et a une valeur de référence 1 La réponse n'est pas utile. C'est une mauvaise réponse. Elle ne répond pas à la question.

Enveloppez une autre couche.

<p id="wrapper">
    <p id="wrapper2">
        <img src="demo_img3.jpg" alt="" />
    </p>
</p>

#wrapper{
    position: relative;
    width: 200px;
    height: 200px;
}
#wrapper2{
    position: absolute;
    left: 50%;
}
img{
    margin-left: -50%;
}

wrapper2的宽度是img宽度。img的margin-left就等于自身宽的一半，相当于left:-50%*width

• Réponse le 20 avril · Mis à jour le 20 avril
• 2 Commentez
• Modifier

toBeTheLight4,9k réputation

Soumettre un commentaire

× Les commentaires prennent en charge la syntaxe Markdown partielle : **bold**_italic_[link](http://example.com)> 引用`code`- Liste .
Dans le même temps, les utilisateurs que vous @ recevront également des notifications

La réponse est utile et a une valeur de référence 1 La réponse n'est pas utile. C'est une mauvaise réponse. Elle ne répond pas à la question.

img est un élément de bloc en ligne et peut être directement aligné sur le texte au niveau parent : center;

• Réponse le 3 mai
• Commentez
• Modifier

hugangqiang117 Réputation

Soumettre un commentaire

× Les commentaires prennent en charge la syntaxe Markdown partielle : **bold**_italic_[link](http://example.com)> 引用`code`- Liste .
Dans le même temps, les utilisateurs que vous @ recevront également des notifications

La réponse est utile et a une valeur de référence 1 La réponse n'est pas utile. C'est une mauvaise réponse. Elle ne répond pas à la question.

En fait, nous voulons obtenir l'effet de centrage horizontal. Voici quatre méthodes pour obtenir un centrage horizontal (Remarque : dans chaque exemple ci-dessous, l'opération d'alignement de l'élément enfant est implémentée et le conteneur parent de l'élément enfant est implémenté. l'élément parent)

Utilisez le bloc en ligne et l'alignement du texte pour implémenter

.parent{
    text-align: center;
}
.child{
    display: inline-block;
}

Avantages : bonne compatibilité ;

Inconvénients : nécessité de définir les éléments enfants et les éléments parents en même temps

Utilisez margin:0 auto pour réaliser

.child{
    width:200px;
    margin:0 auto;
}

Avantages : Bonne compatibilité

Inconvénients : Nécessité de préciser la largeur

Utilisez le tableau pour mettre en œuvre

.child{
    display:table;
    margin:0 auto;
}

Avantages : il vous suffit de vous configurer vous-même

Inconvénients : IE6 et 7 doivent ajuster la structure

Utiliser le positionnement absolu

.parent{
    position:relative;
}
.child{
    position:absolute;
    left:50%;
    transform:translate(-50%);
}

Inconvénients : mauvaise compatibilité, disponible pour IE9 et supérieur

Mise en œuvre pratique de la mise en page flexible

La première méthode

.parent{
    display:flex;    
    justify-content:center;
}

La deuxième méthode

.parent{
    display:flex;
}
.child{
    margin:0 auto;
}

Inconvénients : mauvaise compatibilité, si un aménagement de grande surface est réalisé, l'efficacité peut être affectée

• Réponse le 5 mai
• Commentez
• Modifier

yogi27 Réputation

Soumettre un commentaire

× Les commentaires prennent en charge la syntaxe Markdown partielle : **bold**_italic_[link](http://example.com)> 引用`code`- Liste .
Dans le même temps, les utilisateurs que vous @ recevront également des notifications

La réponse est utile et a une valeur de référence 0 La réponse n'est pas utile. C'est une mauvaise réponse. Elle ne répond pas à la question.

Enveloppez p à l'extérieur. Lorsque img.onload, js calcule la largeur et l'attribue au calque externe. Centrez le contenu externe

• Réponse le 21 avril
• Commentez
• Modifier

Jessica_loli16 Réputation

Soumettre un commentaire

× Les commentaires prennent en charge la syntaxe Markdown partielle : **bold**_italic_[link](http://example.com)> 引用`code`- Liste .
Dans le même temps, les utilisateurs que vous @ recevront également des notifications

La réponse est utile et a une valeur de référence 0 La réponse n'est pas utile. C'est une mauvaise réponse. Elle ne répond pas à la question.

Donnez d'abord à p une position:relative;
puis donnez à img a {

position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);

}
S'il n'est pas compatible avec c3, vous pouvez donner img{

position: absolute;
left: 0;
top: 0;
bottom:0;
right:0;
margin:auto;

}

• Réponse le 21 avril
• Commentez
• Modifier

clownzoo11 Réputation

Soumettre un commentaire

× Les commentaires prennent en charge la syntaxe Markdown partielle : **bold**_italic_[link](http://example.com)> 引用`code`- Liste .
Dans le même temps, les utilisateurs que vous @ recevront également des notifications

La réponse est utile et a une valeur de référence 0 La réponse n'est pas utile. C'est une mauvaise réponse. Elle ne répond pas à la question.

1

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

2

p{
    text-align: center;
    
    img{
         display: inline-block;
    }
}

3

p{
    position: relative;
    
    img{
        position: absolute;
        left: 50%;
        top: 50%;
        margin: -(图片高度/2) 0 0 -(图片宽度/2)
    }
}

4 Utilisez flex

• Réponse le 21 avril · Mis à jour le 21 avril
• Commentez
• Modifier

Loup solitaire dans le vent227 réputation

Soumettre un commentaire

× Les commentaires prennent en charge la syntaxe Markdown partielle : **bold**_italic_[link](http://example.com)> 引用`code`- Liste .
Dans le même temps, les utilisateurs que vous @ recevront également des notifications

La réponse est utile et a une valeur de référence 0 La réponse n'est pas utile. C'est une mauvaise réponse. Elle ne répond pas à la question.

Une couche de p à l'extérieur et une couche de p à l'intérieur pour limiter la taille de l'image

• Réponse le 3 mai
• Commentez
• Modifier

Fujinishi22 Réputation

Soumettre un commentaire

× Les commentaires prennent en charge la syntaxe Markdown partielle : **bold**_italic_[link](http://example.com)> 引用`code`- Liste .
Dans le même temps, les utilisateurs que vous @ recevront également des notifications

La réponse est utile et a une valeur de référence 0 La réponse n'est pas utile. C'est une mauvaise réponse. Elle ne répond pas à la question.

Vous pouvez y jeter un œil si vous ne considérez pas les problèmes de compatibilité object-fit

• Réponse le 3 mai
• Commentez
• Modifier

CRIMX865 Réputation

Soumettre un commentaire

× Les commentaires prennent en charge la syntaxe Markdown partielle : **bold**_italic_[link](http://example.com)> 引用`code`- Liste .
Dans le même temps, les utilisateurs que vous @ recevront également des notifications

La réponse est utile et a une valeur de référence 0 La réponse n'est pas utile. C'est une mauvaise réponse. Elle ne répond pas à la question.

13

0

0

给我你的怀抱

répondre

répondre à tous(13)

je répondrai Fermer

左手右手慢动作2017-05-16 13:23:39 3 plancher

Donnez à l'élément parent un affichage : table-cell, puis définissez l'alignement du texte et l'alignement vertical qui sont les plus courants

Comme +0

Ajouter une réponse 关闭回复

给我你的怀抱

répondre

大家讲道理2017-05-16 13:23:39 2 plancher

css :

    .box{
        width: auto;
        height: 100px;
        position: absolute;
    }
    .box img{
        width: 300px;//随便改
        height: 100%;
        background: green;
    }
    .box .inner{
        width: 100px;
        height: 100px;
        background: red;
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        top: 0;
        margin: auto auto;
    }

---

html :

<p class="box">
    <img src="aaa.png" alt="">
    <p class="inner"></p>
</p>

Comme +0

Ajouter une réponse 关闭回复

给我你的怀抱

répondre

洪涛2017-05-16 13:23:39 1 plancher

position + transformation

Comme +0

Ajouter une réponse 关闭回复

给我你的怀抱

répondre

Answer 1

Donnez à l'élément parent un affichage : table-cell, puis définissez l'alignement du texte et l'alignement vertical qui sont les plus courants

Answer 2

css :

    .box{
        width: auto;
        height: 100px;
        position: absolute;
    }
    .box img{
        width: 300px;//随便改
        height: 100%;
        background: green;
    }
    .box .inner{
        width: 100px;
        height: 100px;
        background: red;
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        top: 0;
        margin: auto auto;
    }

---

html :

<p class="box">
    <img src="aaa.png" alt="">
    <p class="inner"></p>
</p>

Answer 3

position + transformation