Pourquoi mon Iframe ne se centre-t-il pas horizontalement ?

Comment centrer une iframe horizontalement

La question d'origine mettait en évidence un scénario dans lequel une iframe n'était pas alignée au centre de sa div parent. La cause de ce problème et la solution sont décrites ci-dessous.

Iframe ne se centre pas correctement

Dans le code HTML et CSS fourni, l'iframe est rendu à côté d'un div en utilisant des propriétés similaires pour la largeur, la hauteur, la marge et la couleur d'arrière-plan. Cependant, l'iframe ne s'aligne pas de manière centrale comme le div. En effet, les iframes sont des éléments intrinsèquement en ligne, ce qui signifie qu'ils occupent un espace aussi large que leur contenu.

Solution : ajoutez 'display:block;'

Pour aligner de manière centrale une iframe, il est nécessaire de la convertir d'un élément inline en élément block. Cela peut être fait en ajoutant la propriété CSS suivante à l'iframe :

<code class="css">display: block;</code>

Ajustements supplémentaires

De plus, pour garantir un alignement correct et empêcher toute bordure de s'afficher sur l'iframe, le CSS suivant peut être appliqué :

<code class="css">border-style: none;</code>

CSS mis à jour :

<code class="css">div, iframe {
    width: 100px;
    height: 50px;
    margin: 0 auto;
    background-color: #777;
}

iframe {
    display: block;
    border-style: none;
}</code>

En implémentant ces modifications, l'iframe sera désormais centré horizontalement dans sa div parent.

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!