Maison > interface Web > tutoriel CSS > le corps du texte

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

Susan Sarandon
Libérer: 2024-10-31 03:58:01
original
427 Les gens l'ont consulté

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;
}
Copier après la connexion

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;
}
Copier après la connexion

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!

source:php.cn
Déclaration de ce site Web
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
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal