Pourquoi mon iFrame ne se centre-t-il pas horizontalement et comment puis-je y remédier ?

Centrer horizontalement un iFrame

Requête :

Considérez l'extrait de code ci-dessous :

HTML:
<div>div</div>
<iframe></iframe>

CSS:
div, iframe {
    width: 100px;
    height: 50px;
    margin: 0 auto;
    background-color: #777;
}

Contrairement au div environnant, pourquoi l'élément iFrame ne parvient-il pas à s'aligner au centre ? Comment cela peut-il être résolu ?

Réponse :

Pour centrer un iFrame horizontalement, appliquez le display: block; propriété à son CSS. Voici le code révisé :

HTML:
<div>div</div>
<iframe></iframe>

CSS:
div, iframe {
    width: 100px;
    height: 50px;
    margin: 0 auto;
    background-color: #777;
}

iframe {
    display: block;
    border-style:none;
}

L'affichage : block; La propriété définit l'iFrame pour qu'il se comporte comme un élément de niveau bloc, garantissant qu'il occupe sa propre ligne et s'aligne horizontalement avec les autres contenus. De plus, style de bordure : aucun ; élimine la bordure par défaut de l'iFrame pour conserver l'apparence d'une boîte centrée.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!