recherche

Maison  >  Questions et réponses  >  le corps du texte

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

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

Tri par défaut Tri temporel

13 réponses

3

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

1

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

1

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

1

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

1

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

0

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

0

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

0

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

0

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

0

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

0

给我你的怀抱给我你的怀抱2773 Il y a quelques jours1816

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

  • 黄舟

    黄舟2017-05-16 13:23:39

    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épondre
    0
  • 仅有的幸福

    仅有的幸福2017-05-16 13:23:39

    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épondre
    0
  • 天蓬老师

    天蓬老师2017-05-16 13:23:39

    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épondre
    0
  • PHP中文网

    PHP中文网2017-05-16 13:23:39

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

    répondre
    0
  • 怪我咯

    怪我咯2017-05-16 13:23:39

    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

    répondre
    0
  • 过去多啦不再A梦

    过去多啦不再A梦2017-05-16 13:23:39

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

    répondre
    0
  • PHP中文网

    PHP中文网2017-05-16 13:23:39

    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épondre
    0
  • 仅有的幸福

    仅有的幸福2017-05-16 13:23:39

    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

    répondre
    0
  • 淡淡烟草味

    淡淡烟草味2017-05-16 13:23:39

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

    répondre
    0
  • 巴扎黑

    巴扎黑2017-05-16 13:23:39

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

    répondre
    0
  • Annulerrépondre