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

Question

Code HTML {code...} Exemple de l'effet souhaité. La zone rouge est div et la zone verte est img C'est-à-dire que la largeur de img n'est pas fixe, elle ne peut donc pas être résolue par. fixation de la marge gauche.

黄舟 · Answer

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;
}

仅有的幸福 · Answer

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

天蓬老师 · Answer

Enveloppez une autre couche.

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

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

PHP中文网 · Answer

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

怪我咯 · Answer

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)

Réalisé en utilisant le bloc en ligne et l'alignement du texte

.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 installer

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

过去多啦不再A梦 · Answer

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

PHP中文网 · Answer

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;

}

仅有的幸福 · Answer

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用flex

淡淡烟草味 · Answer

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

巴扎黑 · Answer

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

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

Code HTML

Exemple d'image de l'effet souhaité

13 réponses

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

Utilisez margin:0 auto pour réaliser

Utilisez le tableau pour mettre en œuvre

Utiliser le positionnement absolu

Mise en œuvre pratique de la mise en page flexible

La première méthode

La deuxième méthode

répondre à tous(13)je répondrai

Réalisé en utilisant le bloc en ligne et l'alignement du texte

Utilisez margin:0 auto pour réaliser

Utilisez le tableau pour mettre en œuvre

Utiliser le positionnement absolu

Mise en œuvre pratique de la mise en page flexible

La première méthode

La deuxième méthode