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

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

Susan Sarandon
Susan Sarandonoriginal
2024-10-31 03:58:01348parcourir

Why is My iFrame Not Centering Horizontally, and How Can I Fix It?

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn